Add delay to ScrollTrigger reveal animation

[Vlad Tw]

Hi guys, hope you're having an amazing day! Mine not so much, as a gsap beginner. 🙄

I'm trying to add a stagger to the reveal animations of the elements that are positioned on the same level in the page ( y axis).

 

More precisely, i want to add some delay between revealing the image and it's corresponding text. 

Any suggestions will help.

 

Thank you!

See the Pen pojzxwZ by GreenSock (@GreenSock) on CodePen

[Cassie]

Hi Vlad - I can certainly help you with this.

I'm just wondering if this is the best demo to be working on if you're learning. It's a bit of a complex example because it's demo-ing different animations depending on direction.

Usually you'd be able to use the position parameter. Just wanted to check in case you're trying to learn about positioning and you've ended up down a rabbit hole you didn't intend to be down?

If you'd like to carry on with this demo I'll try to comment it out to make it a little clearer. ☺️

[Vlad Tw]

Hi Cassie, thank you for your time!

 

That's a nice point you have there. I 'learn' from so many places outside gsap, and the more i learned, the more i felt the need to learn. I got addicted to learning and that turned out not to be the most proficient way of moving forward. I switched a bit to be addicted to acting and then asking for feedback.

This codepen seemed the right approach for me and i chose it as the way to implement such a reveal-on-scroll on a website, and i was hoping there is some small adjustment i could make to the current architecture to obtain the stagger effect.

If however you think there is a better approach to obtain a similar centralized solution to handle such a reveal on scroll, please let me know.

 

 Again, thank you so much!

[Cassie]

Ok, cool. Glad I asked!

So if you'd like to do a reveal on scroll, a basic version would be something like this

See the Pen gORdWJm?editors=1010 by GreenSock (@GreenSock) on CodePen

This will be nice and simple to adjust or add to for your use case. You can change the position parameter to adjust the stagger. Right now it's playing the second tween halfway though the first tween - '<50%'

I've adjusted this one too.

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

Following the structure already set out - I added a 'delay' class to any element that would be delayed.

delay: elem.classList.contains("gs_delay") ? 0.3 : 0,

Then in the tween params I'm checking for that class in a ternary and adding a delay if the class exists. This is a bit of a convoluted route though so I would recommend starting with the first pen and layering on any behaviour you need rather than starting with a complex solution and trying to wrangle it.

[Vlad Tw]

Exactly what i was looking for!

You're a life saver.

Thanks a lot 💚

[Cassie]

No worries pal!

 

Glad to have you onboard Club GreenSock too, hope you're enjoying the learning curve.