combining scrollTrigger that zooms in timeline already on scrollTrigger for other tweens

[jeanettable]

In an attempt to make my pinned text slideshow feature more interesting with a zoom that is also on a scrub, I ended up with nested scrollTriggers. It appears to be working, but I am wondering if this is a good approach, and also about how I should go about specifying duration for the nested scrollTrigger? I ended up manually adding the other durations that follow it, in hopes that the zoom would take the full time of the text appearance tweens, and could not come up with another way to adjust for duration from the docs since it measures in seconds. 

The other piece that doesn't work as I expected is to do with the text getting zoomed with the image. Is this to do with how I'm trying to target text by id's for tweens, and the class with the background-image for the zoom?

** Further explanation: I have been playing with the markup (div ending originally on 19 for .intro, but tried separating it by closing it on ln 5...) because I was trying to separate the div that has the background img content specified in CSS, thinking that if I triggered only the .intro with the background I want to zoom, that the text specified by hierarchical id's would remain unbothered appearing in the main container. Any insight on why the text is also zooming would be helpful to my understanding of how to target these things separately to create a type of text slideshow feel with a zoom.

 

Thank you for your mental energy, time, and the always helpful assists!

See the Pen OJjpaWN by jeanettable (@jeanettable) on CodePen

[GreenSock]

You definitely shouldn't be nesting ScrollTriggers - that creates a logical impossibility (both would be trying to control the same animation). 

 

The text is zooming too because you're scaling the entire container (which includes all the text). If you want to just zoom the image, you need to create a separate element for that. 

 

Just put all your animations into one timeline. You can add the zoom last and just use the position parameter to make it start at the very beginning of the timeline, and set its duration to whatever the duration of the timeline is like this: 

See the Pen rNzyRZq?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Is that more like what you wanted? 

[jeanettable]

Yes! Nailed it! Okay, I see. I appreciate the insight on the use of the .duration, and solidifying the idea that nested scrollTriggers in fact does not make sense. Thank you!

[GreenSock]

Happy to help, @jeanettable 🙌