Jump to content
GreenSock

neontrenton

Question About Scrolltrigger & Multiple Animations

Recommended Posts

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

Link to comment
Share on other sites

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.

:)

 

  • Like 3
Link to comment
Share on other sites

This is great. Thank you so much!

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×