Search the Community

Hello, I am having some troubles making a scrolltrigger animation in a nuxt component. Basically I have a lenis script for a nuxt page and inside this page a scrolltrigger script for the projectItem.vue component. I installed gsap via npm and imported it both in the page and the component. I don't know why but the code seems to work because we enter in the onEnter() callback but there is no animation at all. Here is a link to the stackBlitz of my project, hoping someone can help me : https://stackblitz.com/~/github.com/Mitiss25/portfolioFinal Thank you !

I was building a website while integrating scrollTrigger with lenis, the animation was not coming in right, when I added marker and set it to true to see the the start and end positions, I saw they where not aligned properly. But If I let's say change one of the animating properties in the code it aligns itself correctly to the actual start and end position. And also no this is not the same issue with ScrollTrigger and Lenis Issue, because some section seem not to have this issue and this particular one does. here is the code on codesanbox. Check the contact component. THANK YOU

I'm trying to call a function inside GSAP - I'm using React, but I'm getting error in my console: App.jsx:59 Uncaught TypeError: Cannot read properties of undefined (reading 'scrollTo') This is the code: import gsap from "gsap"; import ScrollTrigger from "gsap/dist/ScrollTrigger"; import { ReactLenis, useLenis } from "@studio-freight/react-lenis"; gsap.registerPlugin(ScrollTrigger); const App = () => { const lenis = useLenis(({ scroll }) => { // called every scroll }); const [showSpan, setShowSpan] = useState(true); const mainTitleRef = useRef(null); const secondaryTitleRef = useRef(null); const wavingHandRef = useRef(null); const section1Ref = useRef(null); const section2Ref = useRef(null); useLayoutEffect(() => { pinSection(); animateTitles(); return () => { // Cleanup code when the component unmounts ScrollTrigger.getAll().forEach((trigger) => trigger.kill()); }; }, []); // Empty dependency array to run once after the initial render const pinSection = () => { // Pin the section when it enters the viewport ScrollTrigger.create({ trigger: section1Ref.current, start: "top top", end: "1200 top", pin: true, markers: true, onLeave: () => { gsap.to(section1Ref.current, { opacity: 0, duration: 1, onComplete: scrollToSection2, }); // Set opacity to 1 when entering the trigger // scrollToSection2(); // gsap.add( function(){ scrollToSection2(); } ) }, onEnterBack: () => { gsap.to(section1Ref.current, { opacity: 1, duration: 1 }); }, }); }; const scrollToSection2 = () => { lenis.scrollTo(section2Ref.current, { duration: 5 }); }; As you can see scollToSection2 is a React function. Thank you for your help upfront!

<script setup> import { ref, onMounted } from "vue"; import axios from "~/services/axios.js"; import { gsap } from "gsap"; import { ScrollTrigger } from "gsap/ScrollTrigger"; import { CheckBadgeIcon } from "@heroicons/vue/24/solid"; // import { CheckCircle } from '@vue-icons/heroicons'; import paint from "../../assets/images/paint.jpg"; import t1 from "../../assets/images/true/t1.jpg"; import t2 from "../../assets/images/true/t2.jpg"; import t3 from "../../assets/images/true/t3.jpg"; import t4 from "../../assets/images/true/t4.jpg"; import t5 from "../../assets/images/true/t5.jpg"; import t6 from "../../assets/images/true/t6.jpg"; gsap.registerPlugin(ScrollTrigger); const data = [ { image: t1, text: "amjad" }, { image: t2, text: "amjad" }, { image: t3, text: "amjad" }, { image: t6, text: "amjad" }, { image: t4, text: "amjad" }, { image: t5, text: "amjad" }, ]; const initAnimation = () => { const section_2 = document.getElementById("horizontal"); let box_items = gsap.utils.toArray(".horizontal__item"); gsap.fromTo( box_items, { xPercent: 30 * (box_items.length - 1), }, { xPercent: -120 * (box_items.length - 1), ease: "sine.out", // duration: 5, scrollTrigger: { trigger: section_2, pin: true, scrub: 1, // markers: true, snap: 1 / (box_items.length - 1), end: "+=" + section_2.offsetWidth, toggleActions: "restart pause reverse reverse", }, } ); }; let scrollTriggerInstance; const features = ref([]); const featuresFor = ref([]); const error = ref(null); const isLoading = ref(false); onMounted(() => { // fetchChoicesData(); window.addEventListener("resize", () => { ScrollTrigger.refresh(); }); const handleResize = () => { if (window.innerWidth <= 800 && scrollTriggerInstance) { // Kill the ScrollTrigger instance and animation if screen size is less than or equal to 800px ScrollTrigger.refresh(); scrollTriggerInstance.kill(); scrollTriggerInstance = null; } else if (window.innerWidth > 800 && !scrollTriggerInstance) { // Initialize the animation if screen size is more than 800px ScrollTrigger.refresh(); scrollTriggerInstance = initAnimation(); } }; if (window.innerWidth > 800) { scrollTriggerInstance = initAnimation(); } window.addEventListener("resize", handleResize); }); ScrollTrigger.refresh(); </script> <template> <div class="w-full"> <h1 class="text-white text-[3rem] sm:text-[5.5rem] leading-[5rem] font-[600] mb-[2.2rem] ">Pracht <br> Abonnement</h1> <div id="horizontal" class="horizontal w-full big:h-[100vh] big:overflow-hidden big:px-0 px-[1.5rem] py-[1rem] gap-[4rem] grid grid-rows-my-features big:pb-0 pb-[8rem] relative" > <div class="w-full sm:px-[5rem] xl:px-[14rem] h-max grid justify-items-center gap-[1rem] sm:gap-[10rem] sm:grid-cols-2" > <div class="w-max h-max gap-[1rem] sm:gap-[2rem] grid justify-items-start"> <div class="container-tick" > <CheckBadgeIcon class="icon__tick" /> <h1 class="text__tick">Maandeliks Betalen</h1> </div> <div class="container-tick" > <CheckBadgeIcon class="icon__tick" /> <h1 class="text__tick">100% Garantie</h1> </div> <div class="container-tick" > <CheckBadgeIcon class="icon__tick" /> <h1 class="text__tick">Professioneel Schilderwerk</h1> </div> </div> <div class="w-max h-max gap-[1rem] sm:gap-[2rem] grid justify-items-start"> <div class="container-tick" > <CheckBadgeIcon class="icon__tick" /> <h1 class="text__tick">Zorgeloos onderhoud</h1> </div> <div class="container-tick" > <CheckBadgeIcon class="icon__tick" /> <h1 class="text__tick">Reiging & Glasbewassing</h1> </div> <div class="container-tick" > <CheckBadgeIcon class="icon__tick" /> <h1 class="text__tick">Ondafhankelike inspectie</h1> </div> </div> </div> <div class="container row-span-2 w-[100%] h-full m-auto"> <div class="horizontal__content h-full big:grid-flow-col grid gap-y-[4rem]"> <div v-for="num in data" :key="num" class="horizontal__item big:h-[60%] big:w-[28rem] h-[20rem] sm:h-[30rem] w-full mr-[10rem]" > <div class="horizontal__num w-full h-full relative"> <img :src="num.image" class="w-full h-full object-cover" alt="" /> </div> </div> </div> </div> </div> </div> </template> <style scoped> .text__tick { @apply text-white text-[1rem] sm:text-[1.4rem]; } .icon__tick { @apply text-[#f598af] text-[1.8rem] w-[2.2rem] h-[2.2rem]; } .container-tick { @apply grid grid-cols-my-calc grid-flow-col items-center text-left justify-items-start gap-[.7rem]; } </style>

When I click on a navigation link to scroll to a specific section of the page using lenis.scrollTo, all scrollTrigger animations run, causing a poor scrolling experience due to the numerous animations in each section. To address this, I attempted to disable the animations using scrollTrigger.disable() when lenis.scrollTo runs and re-enable them when the particular section is reached. While the animations created with ScrollTrigger pause correctly during the scroll, the page jumps to the top when the scroll is complete. You can view the codepen demo here: see codepen demo here :

Hello there, I'm trying to animate the letters of a sentence. Letters need to appear when its right bound hits the right bound of my viewport (= when the letter enters the viewport). I'm almost there but I seem to be missing something. I'm using the containerAnimation parameter but maybe it's not the right thing to do here. Anyway I'm opened to suggestions, thanks for your help folks Olivier

Hi everyone, I'm using Lenis smoothscroll and I have lots of scrollTrigger timelines that are triggered with toggleAction and scrub. They work fine when I wheel scroll down my page but when I click on an anchor to immediately go to my section, previous timelines do not finish properly, I have styles that are not added/removed only on the ones triggered with toggleAction. I tried forcing the animations to the end like below, but that doesn't work. document.querySelectorAll('a[href^="#"]').forEach((anchor) => { anchor.addEventListener('click', (e) => { e.preventDefault(); const href = anchor.getAttribute('href'); if (href === '#') { return; } window.lenis.scrollTo( href, { immediate: true, onComplete() { const scrollTriggers = ScrollTrigger.getAll(); scrollTriggers.forEach((st) => { if (st.animation) { st.animation.progress(1); } }); } } ); }); }); What am I doing wrong here ? Thanks for your help.