Myujth

I'm using Scrollmagic and GSAP to animate a pinned scene that has different desired effects:

1. Scroll background images in different directions (Run multiple tweens simultaneously in a pinned element)


2. Have quotes animate from 0 opacity to 1 opacity (Run independent tweens in this same scene within the same duration)

I am using GSAP's fromTo to provide a smooth tween on the scroll for the background images and that part is working just fine. Each fromTo has the position parameter attribute set to 0 so they run simultaneously:

var slideAnimation = new TimelineMax()
.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); 0); 

It moves the background images upon scroll and achieves the desired effect:
https://codepen.io/rcneil/pen/Mzjjma

The problem comes in when I am looking to have an overlay of text fade in and out and run this independent of the background image animation. I am confused as to whether I should use to or stagger or what to set this up. I have tried adding these to the timeline with the position attribute set to a time, rather than 0 to be simultaneous:

.to(".quote1", 1, autoAlpha: 0, autoAlpha: 1, '.5s')
.to(".quote1", 1, autoAlpha: 1, autoAlpha: 0, '1.0s')
.to(".quote2", 1, autoAlpha: 0, autoAlpha: 1, '1.5s')
.to(".quote2", 1, autoAlpha: 1, autoAlpha: 0, '2s')
.to(".quote3", 1, autoAlpha: 0, autoAlpha: 1, '2.5s')
.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); 

but it doesn't seem to have any affect. They all seem to fire at the same time anyway:
https://codepen.io/rcneil/pen/xQEEyP

Am I approaching this wrong? Can you not have these on the same timeline, and if not, how would you go about animating different "scenes" on the same pinned element?