Jump to content
Search Community

ScrollTrigger circle reveal

tomw_uk test
Moderator Tag

Recommended Posts

Hi all,

 

Really enjoying GSAP and ScrollTrigger so far. They've really help bring my current project to life!

 

I'm trying to create a circle reveal effect with ScrollTrigger. I've linked my attempt so far. I'm kinda there, but kinda not and was wondering if there was a better way?

 

My main problem is that I want each panel to have its own ScrollTrigger timeline inside (before the circle scale triggers). It feels like this would be "nicer" than one (potentially) super long timeline with three panels worth of animation. Is that possible, and if so, could you please point me in the right direction? Each timeline would be length based (end: +=4000 for example).

 

I've taken a couple of shortcuts to keep the example short:

 

- To dot wouldn't be visible from the beginning

- I'd calculate the proper figure to scale it to

 

Thanks so much in advance,

Tom.

See the Pen MWjLBLP by tomwelch (@tomwelch) on CodePen

Link to comment
Share on other sites

Thanks Zach, that's a great article!

 

Each section is intended to have unique animations inside, and the dot animation will differ for each section too which is why I didn't go down the loop route. I like your suggestion in the article of making functions though, so maybe I can do something in a loop with those to clean up the code :)

 

Thanks again,

Tom.

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.
×
×
  • Create New...