Recommended way to organize code for a scrolling-telly

[nickraps]

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.

 

 

[Cassie]

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

[nickraps]

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.

[OSUblake]

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.