maciei

Oh wow okay, that makes a lot of sense! Thank you so much for providing this. Also, I watched this https://gsap.com/resources/position-parameter/ which helped a lot! One more question regarding controlling timing and controlling tweens: - Is it a good approach to make multiple animations/tweens within the loop like the one below? - What would be the best way to control tweens within the loop, what I mean is: for example I want the second element/iteration to last longer (duration 2s) but the last one to be back to normal (1s). I'm trying to catch good practice in composing an efficient set of animations that depend on each other. Also each .country element needs to be fired almost in the same time with the relevant .animate-test but i think i have done it nicely with ""<0.25" position parameter " - This is my current code: var points = gsap.utils.toArray(".point"); // var height = 200 * points.length; console.log(height, 'total height') var locations = gsap.timeline({ scrollTrigger: { trigger: ".locations", start: "top top", end: "+=5000px", scrub: true, id: "points", pin: true, markers: true, }, }); locations.to(".main-title", { opacity: 1, duration: 1 }); locations.to(".main-title", { opacity: 0, duration: 1 }); // https://codepen.io/ervinbosenbacher/pen/oNYOwaz points.forEach(function (elem, i) { console.log(elem.getElementsByClassName("country")) gsap.set(elem, {position: "absolute", top: 0}); locations.set(elem, {zIndex: 100}); // locations.from(elem.getElementsByClassName('split right'), {opacity:0}, i) locations.from(elem.getElementsByClassName("animate-text"), {opacity: 0, translateY: 100, duration: 1}); locations.to(elem.getElementsByClassName("country"), {opacity: 1, duration: 1}, "<0.25"); if (i != points.length - 1) { locations.to(elem.getElementsByClassName("animate-text"), {opacity: 0, translateY: -100, }); // locations.to(elem.getElementsByClassName('split right'), { opacity: 1}, i + .25) } });

Hello everyone! I'm having trouble understanding and fully controlling my animations with Scrolltrigger and scrub. What I'm trying to achieve is - i want to have two animation elements (.main-title, var points) fired by scrollTrigger with the same trigger point. However I want to animate .main-title once it's finished i want to fire the next animations which are in forEach() .animate-text with paired .country. I think i achieved that in the codepen (please feel free to correct me or show the better/more efficient way). Now i have two problems/questions: I want to have full control of the duration/amount of scroll of each animation (.main-title, each point etc) for example i want to .main-title to be fast then first point to be slow, the next point fast and the last point very slow. (By point I mean each elem in forEach()) Also i have a bug on .main-title that sometimes it does jump up/down - no idea how to tackle this. Every input/tip/better approach to the whole functionality will be much appreciated, thank you guys in advance!