MD81

Thanks a lot @ZachSaucier ok, I already thought about creating seperate timelines. I’ll try to fix it. Thank you!!!

Dear GSAP Pros, I ran into an issue, where a ScrollTrigger should trigger the start of a timeline which was declared before. The Problem: The animation timeline is a bit complex (but simplified in the CodePen example) and should affect multiple elements in multiple sections. I created a loop, so that each of the elements would get triggered at it’s correspondending scroll position. But all instances are still triggered at the same time. I guess the problem is the timeline, which was declared outside of it. On the other hand I can’t get it inside the loop. I would appreciate any help!! Thanks a lot!!!

Thanks a lot @ZachSaucier, that’s genius!!! Also thanks a lot for your tips/side notes. Here’s the final pen https://codepen.io/mdillgen/pen/MWyxKYg

Hello @ZachSaucier Sorryyyy!!! Unfortunately I can’t get it The slider plays once but onEnter and onLeave are not respected https://codepen.io/mdillgen/pen/VwaRYWQ

Thanks @ZachSaucier I will try hard ?

Hey @ZachSaucier, the end goal is to stop the slider from playing when it has been scrolled out of view! Because of its large images, there are some performance issues further down in my current projects website. So I will just stop playing the slider when I scroll to the main section further down the page.

Dear GSAP friends, i am just calling a Slider function (nextItem) in ScrollTrigger’s “onEnter”. Perfect! But how can i reset (inital state) or pause that function “onLeave”? Please see the provided Codepen Thanks a lot in advance!!!

@akapowl many thanks! Works totally fine! @ZachSaucier Thanks also for your suggestion.

@akapowl First of all sorry for not providing a codepen, but the rest of the architecture is a bit complicated so i could not recreate it so quickly. BUT, your solution works like a charm except there is one little problem. Expanding the nav (toggling) is animating in as well. So the refresh of the ScrollTrigger happens already, when the nav is still expanding to its full height. Although the trigger positions are updating, they are still not in their correct positions. Is there a way to delay the ScrollTrigger.refresh(); ? Thank you so much!!!

Hello, I am using ScrollTrigger to move a fixed nav out of the view with the footer. I think the mechanism here is not as important as the problem is more about using variables for the trigger positions. I get the vertical height of my nav first and then use its value for the trigger positioning. The problem is, the nav will change height depending on its own state (toggled/expanded). Is there a way I can update the variable vheight? let box = document.querySelector('#nav'); let vheight = box.offsetHeight; gsap.registerPlugin(ScrollTrigger); gsap.to("#nav", { scrollTrigger: { trigger: "#footer", start: "0 " + vheight, end: vheight + " " + vheight, scrub: 0, // id: "nav-out", // markers: true, }, translateY: "-" + vheight, ease: "none", }); Thanks a lot!