Jump to content
GreenSock

nickraps

Recommended way to organize code for a scrolling-telly

Go to solution Solved by Cassie,

Recommended Posts

Hi, I am creating a scrolling-telly experience that basically looks like this one: https://pudding.cool/2019/04/eu-regions/

 

I plan to use ScrollTrigger. But I am fairly new to the platform and can't really decide how to best organize the animations. So I'm curious to learn about your opinions regarding how to organize the animations:

 

  • Should it be a timeline controlled by a single ScrollTrigger? (Is this even possible to achieve the desired behavior? It seems like each box on the side should be one more ScrollTrigger.)
  • Or should it be multiple tweens controlled by multiple ScrollTrigger?
  • Or a third approach?

 

What are the pros and cons?

 

Maybe I am asking too much... please let me know. Thank you.

 

 

Link to comment
Share on other sites

  • Solution

Hi Nick,

 

It's really entirely dependant on your markup and animations - we can't see that from this example alone. 

I would probably use a scrolltrigger to pin the content and then break up the decorative datavis animations into their own separate triggers.

Maybe this codepen will be a good starting point?

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

Link to comment
Share on other sites

3 hours ago, Cassie said:

Hi Nick,

 

It's really entirely dependant on your markup and animations - we can't see that from this example alone. 

I would probably use a scrolltrigger to pin the content and then break up the decorative datavis animations into their own separate triggers.

Maybe this codepen will be a good starting point?
 

 

 

Thank you! Do you know what difference does it make to use ScrollTrigger's pin comparing to CSS position sticky? I guess pin is more flexible and easy to use.

Link to comment
Share on other sites

25 minutes ago, nickraps said:

Do you know what difference does it make to use ScrollTrigger's pin comparing to CSS position sticky? I guess pin is more flexible and easy to use.

 

You should use pin as that will give you the most control.

 

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.
×