Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Vlad Tw

Add delay to ScrollTrigger reveal animation

Go to solution Solved by Cassie,

Recommended Posts

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

Link to comment
Share on other sites

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. ☺️

  • Like 2
Link to comment
Share on other sites

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!

Link to comment
Share on other sites

  • Solution

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.

  • Like 3
Link to comment
Share on other sites

Exactly what i was looking for!

You're a life saver.

Thanks a lot 💚

  • Like 1
Link to comment
Share on other sites

No worries pal!

 

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

  • Like 1
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.
×