Start and autoplay section of animation with one scroll

[mrztms]

Hi! I'm building a website for a client using ScrollTrigger and similar approach as the Airpods example from Codepen.

In the Airpod example the animation ( frames ) are played using the scroll, my question is how can one add start to sections of the animations using just one scroll. 

 

Using the airdpod example what I would like to achieve is:

- 1 scroll => animation plays from frame 0 to frame 40 then stops,

- another scroll animation plays from 41 to 100,

- another scroll from 100 to 148.

 

So I would have 3 animation sections which would start to play with one scroll each.

Haven't added my example to codepen since it's very similar to the Airdpod example, if I could get some ideas or which GSAP plugin to use in combination with scroll trigger, woudl be much appreciated.

 

Thank you!

 

See the Pen ZEbGzyv by j-v-w (@j-v-w) on CodePen

[Rodrigo]

Hi @mrztms and welcome to the GreenSock forums!

 

First thank you for being a Club GreenSock member and supporting GSAP! 🥳

 

Taking this example by @OSUblake:

See the Pen 2152a28cffe2c2c0cca8a3e47f7b21c6 by osublake (@osublake) on CodePen

 

I made this one that uses the Observer Plugin in order to detect the wheel event and move to a specific frame based on the current frame and the direction:

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

 

Here you can read more about the Observer Plugin:

https://greensock.com/docs/v3/Plugins/Observer

 

Is a slightly different approach but it serves the description you provided well enough IMO. Let us know if you have more questions.

 

Happy Tweening!

[mrztms]

Hi @Rodrigo

 

Thank you for taking the time to reponds and mentioning Observer Plugin, I know there are a lot of questions in the forum.

You're example is excatly what I was asking and looking for, so this is much appreciated. However I forgot to add one more detail, that what if you have content after your canvas animation?

 

My thought process is you have a hero section with your product animation but after that you have new sections describing a product or just regular content you miss the animation since the scroll takes you down the page. The canvas animation playing nicely when beeing on fixed position, in the current example.

 

I have forked your demo, and added some dummy content under it. If this is out of scope of the forum I totally understand, I just feel this maybe will help others that are looking to achieve something similar.

 

See the Pen xxzPRqY by tamasmoroz (@tamasmoroz) on CodePen

[mvaneijgen]

Here is an example that forces the observer animation to play first before the rest of the page is allowed to scroll. If I'm correct the main thing is the   preventDefault: true on the observer and disabling the observer when it has completed.

 

Hope it helps and happy tweening! 

 

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