Tayp - GSAP script
Tue Mar 15 2022 07:52:10 GMT+0000 (Coordinated Universal Time)
Saved by @alyssietayp
<script src="https://unpkg.co/gsap@3/dist/gsap.min.js"></script> <script src="https://unpkg.com/gsap@3/dist/ScrollTrigger.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/locomotive-scroll@3.5.0"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.0/ScrollToPlugin.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script> <script> // GSAP script for Features gsap.registerPlugin(ScrollTrigger, ScrollToPlugin); let slider = document.querySelector(".horizontal_slider"); let list = document.querySelector(".horizontal_slider_list"); let items = document.querySelectorAll(".horizontal_slider_item"); const horitl = gsap.timeline({ defaults: { ease: "none" }, scrollTrigger: { trigger: slider, scrub: 1, pin: true, start: "top top", scroller: "body", end: `+=${items.length - 1}00%`, snap: { snapTo: "labels", duration: 0.2, delay: 0, ease: "power4.inOut" } } }); horitl.addLabel(`l0`); items.forEach((el, index) => { if (index > 0) { horitl.to(list, { xPercent: -100.5 * index }); horitl.addLabel(`l${index}`); } }); </script> <script> // GSAP script for How it works ScrollTrigger.defaults({ markers:false }) var points = gsap.utils.toArray('.point'); var imgs = gsap.utils.toArray('.point img'); var indicators = gsap.utils.toArray('.indicator'); var indicator = gsap.utils.toArray('.indicator a'); var desc = gsap.utils.toArray('.indicator .ci-desc'); var height = 100 * points.length; gsap.set('.indicators', {display: "block"}); var tl = gsap.timeline({ duration: points.length, scrollTrigger: { trigger: ".philosophie", start: "top center", end: "+="+height+"%", scrub: true, id: "points", } }) var pinner = gsap.timeline({ scrollTrigger: { trigger: ".philosophie", start: "top top", end: "+="+height+"%", scrub: true, pin: ".philosophie", pinSpacing: true, id: "pinning" } }) points.forEach(function(elem, i) { gsap.set(elem, {position: "absolute", top: 0}); tl.from(indicators[i], {className: "indicator"}, i) tl.to(indicators[i], {className: "indicator active"}, i) tl.to(indicators[i], {borderLeft: "3px solid #EFF7FE", padding: "0 0 0 35px", duration: 0.25}, i) tl.to(indicator[i], {color: "#EFF7FE", duration: 0.25}, i) tl.to(desc[i], {display: "block"}, i) tl.from(elem.querySelector('img'), {autoAlpha:0}, i) if (i != points.length-1) { tl.to(indicators[i], {className: "indicator"}, i+1) tl.to(indicators[i], {borderLeft: "3px solid #23329a", padding: "15px 0 30px 35px", duration: 0.25}, i+0.75) tl.to(indicator[i], {color: "#23329a", duration: 0.25}, i+0.75) tl.to(desc[i], {display: "none"}, i+0.5) tl.to(elem.querySelector('img'), {autoAlpha:0}, i + 0.75) } }); indicators.forEach(function(elem, i) { elem.addEventListener('click', function(e){ e.preventDefault(); var totalitems = points.length; var scope = $('#food-howitwork').height() / totalitems; var scrollto = scope * i; $("html, body").animate({scrollTop: $('#food-howitwork').offset().top + scrollto}, 1000); }); }); </script>
Comments