Animate an animation on scroll

[evolveUK]

Hi there,

I want to run an animation by scrolling the page, as the user scrolls the animation happens, and then when completed the webpage continues to run. Similar to this on the apple website:

https://www.apple.com/uk/ipad-pro/

I'm pretty sure this is all controlled with WebGL but wondered if I could animate and get the same effect?

thanks for the thoughts.

[Nicktendo28]

Try this tutorial on scrolling text. https://www.youtube.com/watch?v=ERin50wd3XI

[evolveUK]

Hey @Nicktendo28 

Thanks for the reply. I see where you're mind is at, perhaps the entire animation could fill the screen and the scroll could run through it but I think this is more for being within a single frame, as opposed to running an animation through its timeline then moving on.

[evolveUK]

Update - I thought I could get Javascript doing this by creating the video in an imaginary box of a few thousand pixels, then as the page scrolled down tha animation was sticky and it ran as scrolled but no joy.

[JoãoCésar · Accepted solution]

Hi.

I think this answer may be helpful:

https://community.adobe.com/t5/animate-discussions/how-do-i-animate-the-timeline-with-the-mouse-whee...

Please let us know.

Regards,

JC

[evolveUK]

Hey @JoãoCésar ,

Many thanks for this link, it's broken the back of my problem and it's really exciting. How do you think I could control it on a full page scroll? For example, the users arrives at the page, sees the usual header and content blocks, then as they scroll down the page they come to the animation, scrolling then controls the animation and when completed the page goes back to scrolling to further content blocks. I suspect that would have to be externally controlled in JavaScript. Any thoughts, and I really appreciate your help. This is looking fantastic.

[JoãoCésar]

Hi.

I'm really sorry for the long delay.

I've never done an interactivity like this, but I suspect you might have to notify your page that the Animate generated content timeline has ended. So the user can actually scroll the page again and not the timeline.

Please let me know if you've made any progress or if you still need any help and I'll try to think of something.

Regards,

JC