kobro

Thanks to Rodrigo for setup code. I had a problem with ScrollTrigger and trigger area if using not fixed size images. When images are still downloading, ScrollTrigger already sets the wrong trigger area, but it's fine after reloading the page. So I found a solution to use onNuxtReady instead of onMounted. Maybe it will be helpful to others. onNuxtReady((app) => { console.log("Nuxt ready!"); gsap.timeline... }) Put gsap code in callback function and it runs after everything is downloaded. UsingScrollTrigger.refresh() as a callback for @load event broke native Nuxt scroll behaviour on route changed. For example, navigate to the page that uses refresh() leaves you at the scroll position from previous page. Nuxt 3.2.3.

Hi. I have the structure where all the elements are in "position: fixed" and animate them with ScrollTrigger. My problem is when I want to play animation to label or position in timeline on click. Timeline plays, but page scroll does not move. I thought to try to calculate scroll position but all elements are fixed so it doesn’t work. Is there any possibility to create timeline that doesn’t depend on scroll page but plays on scroll? Or something that will scroll and play at the same time? Press button "Go to BLUE" and scroll after animation stop.

Thank you very much for the example you made. It is exactly what I was looking for.

Hi. Is there any way to control lottie animation in gsap timeline? For example, add lottie between these animations. tl .from(".card1", {y: '-200vh', rotation: 180}) //Animate lottie here while scrolling into trigger view like: //.to("#myLottie", {lottiePlayback: 100%}) .from(".card2", {y: '-200vh', rotation: 180}) .from(".card3", {y: '-200vh', rotation: 180}) Like in Webflow there is a feature to control lottie in timeline. I have already tried with ScrollLottie plugin and read a lot of topics about it but I didn't find how to do it. All solutions do not insert in the timeline that exist.