• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Animate an animation on scroll

Community Beginner ,
Apr 22, 2022 Apr 22, 2022

Copy link to clipboard

Copied

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.

Views

1.6K

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Community Expert , May 09, 2022 May 09, 2022

Votes

Translate

Translate
Community Expert ,
Apr 22, 2022 Apr 22, 2022

Copy link to clipboard

Copied

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Apr 22, 2022 Apr 22, 2022

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
May 09, 2022 May 09, 2022

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
May 09, 2022 May 09, 2022

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
May 31, 2022 May 31, 2022

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jun 06, 2022 Jun 06, 2022

Copy link to clipboard

Copied

LATEST

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines