Question About Scrolltrigger & Multiple Animations

[neontrenton]

Hello,

 

I have a (somewhat) working example of what I'm trying to accomplish here: 

 

Essentially, when you reach a section, the photo shrinks/zooms out on scroll. This works fine but I'm trying to figure out how to, after the photo has zoomed out, show the text. As it stands, the text shows immediately upon reaching the section. Is there a straightforward way of showing the text only once the photo zoom effect is finished? 

See the Pen qBpeVry by neontrenton (@neontrenton) on CodePen

[PointC]

Hi @neontrenton 

 

First, let's get rid of all the CSS transitions. This is a GSAP forum. 

 

Just giving you a hard time, but using both can cause fights for control.

 

Here's a quick fork of your demo. I looped through the container elements and created a trigger and timeline for each. You'll also see that I used a CSS variable for the headline pseudo element so the underline would animate for each. This still needs some tweaking but should point you in the right direction.

 

See the Pen 3d32a7dc10ce7ec78f062ebdc2967d73 by PointC (@PointC) on CodePen

 

Happy tweening.

 

[neontrenton]

This is great. Thank you so much!