le_kiki

Hey there, I'm currently messing around and trying to learn the Scroll Trigger plugin and have created the below CodePen: https://codepen.io/desode/pen/OJmMLrL Currently from the documentation I have used example code to make some boxes that animate when the top of the trigger hits the top of the viewport, that part works perfect. So I then tried to alter the code to add another animation that starts as the trigger leaves the viewport. Does this require a new timeline? Or is it possible to add something in the same timeline? In my CodePen example I tried with a new timeline so as to set different triggers but am not sure if this is best practice or not, and clearly from my CodePen it doesn't work as expected. If you scroll you'll see my first animation working, then keep scrolling and you see my second anim work and then break. What would be the best practice to add an exiting animation to these boxes? I am just looking to learn, so will appreciate explanation responses to these questions

Thank you for that @ZachSaucier ... that makes sense, but I still keep wondering if using the nth-of-type isn't the best method ? It keeps jumping and skipping some boxes so I just tested and played with a few things some more and changed my code Check out the below: const observerElements = document.querySelectorAll('.scrolled-element'); const observerOptions = { root: null, rootMargin: '0px 0px', threshold: 0 } observerElements.forEach(el => { var scrolled = gsap.timeline({ paused: true }); scrolled.to(el, {y: -100, ease: 'none'}, -0.5); scrolled.to(el, {y: -50, ease: 'none'}, -0.5); scrolled.to(el, {y: -200, ease: 'none'}, -0.5); var elObserver = new IntersectionObserver( entry => { if (entry[0].intersectionRatio > 0) { gsap.ticker.add(elProgressTween) } else { gsap.ticker.remove(elProgressTween) } }, observerOptions ); var elProgressTween = () => { const scrollPosition = (window.scrollY + window.innerHeight); const elPosition = (scrollPosition - el.offsetTop); const durationDistance = (window.innerHeight + el.offsetHeight); const currentProgress = (elPosition / durationDistance); scrolled.progress(currentProgress); } elObserver.observe(el); }); I'd love to pick your brain about what I've achieved above if that is cool with you? I removed the trigger-element and instead am just directly observing the scrolled-element. Is this ok practice? Do you foresee any issues arising from this? I am not entirely sure I understood the need for the trigger-element in any case, but most documentation or examples seems to have it I also removed the nth-of-type and instead added some additional scrolled.to(el, {y: -100, ease: 'none'}, -0.5); with varying Y values to the forEach loop. This seems to now behave quite close to what I am after. What exactly is happening here? Is this targeting the 1st, then 2nd, then 3rd .scrolled-element ? They seem to still jump and flicker from time to time so something still isn't functioning right.. Here is the updated CodePen with the code above: https://codepen.io/kiaramelissa/pen/BaoPQNX

Hey everyone, I recently asked a question to which @ZachSaucier gave an awesome response and helped me discover Intersection Observer. Now I am trying to work a piece of code using Intersection Observer to create a parallax gallery. Here is a basic CodePen example I started targeting the .scrolled-element:nth-of-type(2n) which works well to target every second instance of .scrolled-element Here is my code: // Setup Intersection Observer and GSAP homepage const observerElements = document.querySelectorAll('.trigger-element'); const observerOptions = { root: null, rootMargin: '0px 0px', threshold: 0 }; observerElements.forEach(el => { const scrolled = el.querySelectorAll('.scrolled-element:nth-of-type(2n)'); el.tl = gsap.timeline({paused: true}); el.tl .to(scrolled, {y: -200, ease: 'power2.inOut'}) el.observer = new IntersectionObserver(entry => { if (entry[0].intersectionRatio > 0) { gsap.ticker.add(el.progressTween) } else { gsap.ticker.remove(el.progressTween) } }, observerOptions); el.progressTween = () => { // Get scroll distance to bottom of viewport. const scrollPosition = (window.scrollY + window.innerHeight); // Get element's position relative to bottom of viewport. const elPosition = (scrollPosition - el.offsetTop); // Set desired duration. const durationDistance = (window.innerHeight + el.offsetHeight); // Calculate tween progresss. const currentProgress = (elPosition / durationDistance); // Set progress of gsap timeline. el.tl.progress(currentProgress); } el.observer.observe(el); }); I then wanted to start targeting more of the same selector so added them like so: const scrolled1 = el.querySelectorAll('.scrolled-element:nth-of-type(1n)'); const scrolled2 = el.querySelectorAll('.scrolled-element:nth-of-type(2n)'); const scrolled3 = el.querySelectorAll('.scrolled-element:nth-of-type(3n)'); const scrolled4 = el.querySelectorAll('.scrolled-element:nth-of-type(4n)'); el.tl = gsap.timeline({paused: true}); el.tl .to(scrolled1, {y: -150, ease: 'power2.inOut'}) .to(scrolled2, {y: -100, ease: 'power2.inOut'}) .to(scrolled3, {y: -200, ease: 'power2.inOut'}) .to(scrolled4, {y: -250, ease: 'power2.inOut'}) The reason I need the nth-of-type is because this ties in to a piece of code where my client can repeat content, therefore repeating the same bits of code and using the same classes over and over again to build a gallery of content/images. I'd like to set it up so that I can define every 2nd, 3rd, 4th etc item to move a specific amount with different Y values. Except using the above code, it bugs out and sometimes won't animate past the first element, so I'm wondering if this is the best way to even add multiples of selectors? If using nth-of-type isn't the best path to go down, I am all ears to other ideas too Many thanks in advance for any assistance!

Hey @ZachSaucier Thank you so so much for your reply! Totally understand re: easier to create the solution and I ask any questions from there, and I so appreciate that. I'll take a look through and have a read about the Staggers and Intersection API and let you know if I have any questions, but it looks like there is lots of information there to go on. This is so fun to learn! I'm also going to re-do that old code I was using to detect the scroll and use the Intersection Observer API instead

Hey everyone, Firstly, I just want to say how much I love these forums and the culture of assistance here!! I've come here so many times to find answers and tips for heaps of projects (though this is my first post), so thank you everyone for your contributions! I can't seem to find a solution for this question... I'm still learning and would love to learn HOW I can implement what I want I want to animate a set of DIVs with the class "each-client" one after each other, when the user scrolls them into view. Below is my current code, which works perfectly except it happens right away and not when scrolled into view. var client = $(".each-client") for (i=0; i<client.length; i++) { tl = new TimelineMax({delay:i*0.2}); tl.from(client[i], 1, {opacity:0}) tl.to(client[i], 1, {opacity:0.4}); } I have code that i've previously used to Tween DIVs when scrolled into view, so have tried to combine those two snippets together and have gotten the following: document.addEventListener("DOMContentLoaded", function(){ var documentElement = document.documentElement; //Page height var targetPosY = document.body.scrollHeight; var client = $(".each-client") for (i=0; i<client.length; i++) { tl = new TimelineMax({delay:i*0.2}); tl.from(client[i], 1, {opacity:0}) tl.to(client[i], 1, {opacity:0.4}); }; window.onscroll = function (event) { ( !! window.requestAnimationFrame) ? requestAnimationFrame(onScroll) : onScroll(); } function onScroll(){ var top = Math.max(Math.min(window.pageYOffset || documentElement.scrollTop, targetPosY), 0); if(top <= targetPosY){ var progress = (top / targetPosY); Array.prototype.forEach.call(client, function(tween){ tween.progress(progress); }); } } }); As you can probably tell it doesn't work as I want it to.... it does animate each "each-client" instantly as if all of the onScroll code is just not working. As I am learning and not just looking for a "fix" it would be soooo appreciated if someone could explain to me why the above wouldn't be working and possibly what I have done wrong here Also here is a CodePen of this: https://codepen.io/kiaramelissa/pen/mdeqKNz (I have commented out a big dummy scrolling section so you can first see the animation and remove this if you want to test scrolling)