rcneil

Sahil, this makes a lot of sense. Thank you for explaining everything and providing examples. I have just started to scratch the surface of what GSAP can do but this definitely points me in the right direction. Cheers!

Can I chain TweenMax "fromTo", though? Like this? var master = new TimelineMax(); var tl1 = TweenMax.fromTo(".frame.frame2", 1, {y: "0%"}, {y: "300%", ease: Linear.easeNone}, 0) .fromTo(".frame.frame1", 1, {y: "0%"}, {y: "-300%", ease: Linear.easeNone}, 0) .fromTo(".frame.frame4", 1, {y: "-100%"}, {y: "200%", ease: Linear.easeNone}, 0) .fromTo(".frame.frame3", 1, {y: "100%"}, {y: "-200%", ease: Linear.easeNone}, 0) .fromTo(".frame.frame6", 1, {y: "-200%"}, {y: "100%", ease: Linear.easeNone}, 0) .fromTo(".frame.frame5", 1, {y: "200%"}, {y: "-100%", ease: Linear.easeNone}, 0) .fromTo(".frame.frame8", 1, {y: "-300%"}, {y: "0%", ease: Linear.easeNone}, 0) .fromTo(".frame.frame7", 1, {y: "300%"}, {y: "0%", ease: Linear.easeNone}, 0); master.add(tl1); I have tried created them both as new TimelineMax() timelines and then adding them to a master, but that doesn't work, even with implicitly setting position to 0. They still run one after another...

I'm trying to accomplish something and I'm not sure how to approach it or what direction I should go in. I am using Scrollmagic, however, I think this pertains more to fromTo()'s position attribute and timing. I have an animation where I want background images sliding up on one half and sliding down on the other half. I have achieved this. The second part is I want overlayed text fading in and out while the scrolling is occurring, too. Scrollmagic binds to the "duration" attribute, so 1 = the duration of the pinned scrolled element. The timing I have for that background images is what I had desired. I have the position attribute set to 0 so they fire simultaneously. What I don't understand is how to set up a separate, independent timeline to the same pinned element for the overlaying text to fade in and out. The duration attribute is overridden because of Scrollmagic, so what can I do? Should I try to chain together TimelineMax() tweens? Should I create 2 pinned elements and overlay them on top of one another? You can see my codePen and see I am almost there, but I feel like I am not fully grasping how the the pinned elements work with Scrollmagic or how to chain together the tweens. I have experimented with a lot of variations but my understanding is limited. Any help is greatly appreciated.