Tom Kochi

Thanks @ZachSaucier. This is exactly what I wanted, and seems how it should be. Thanks a lot.

@akapowl Thanks a lot. I got it working. But I am a bit confused. You said "the first Trigger you create should happen after the second one". I didt get that part. Does it mean the trigger happens in reverse order? Can you explain it a bi, pleaset?

Thanks, @ZachSaucier. I tried removing timetine, still the same results. Please see the pen once more. change the 12th line to y: 100 and run. You can see the jumping issue I am facing. I have created another pen with the exact problem. https://codepen.io/tntux/pen/yLOJVQw?editors=1010. Here, expected behaviour is, moving down and fading the image as the user scroll past.

I am new to GSAP. This pen works well. But I want to do a simple change in the .to part - I want the image to move downwards and fade off when the user scroll past. That is, currently, the code is gsap.timeline().from(".left-div img", { y: 200, scrollTrigger: { trigger: ".left-div img", start: "-800px", end: "-400px", scrub: true } }).to(".left-div img", { opacity: 0, x:100, scrollTrigger: { trigger: ".left-div img", start: "-200px", end: "-150px", scrub: true } }) Please note the 11th line - x: 100. I want it to be y: 100 instead. Only the 11th line changes. gsap.timeline().from(".left-div img", { y: 200, scrollTrigger: { trigger: ".left-div img", start: "-800px", end: "-400px", scrub: true } }).to(".left-div img", { opacity: 0, x:100, scrollTrigger: { trigger: ".left-div img", start: "-200px", end: "-150px", scrub: true } }) When I do so, it shows unexpected result - the image jumps down. That's the problem. Could someone help me out? Please correct me if this isn't the real way to accomplish this.