Skip to main content
E
evolveUK
Participant
April 22, 2022
Answered

Animate an animation on scroll

  • April 22, 2022
  • 3 replies
  • 3384 views

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.

      This topic has been closed for replies.
      Correct answer JoãoCésar17023019

      Hi.

       

      I think this answer may be helpful:

      https://community.adobe.com/t5/animate-discussions/how-do-i-animate-the-timeline-with-the-mouse-wheel-in-animate-cc/m-p/9974456

       

      Please let us know.

       

      Regards,

      JC

      3 replies

      JoãoCésar17023019
      Community Expert
      JoãoCésar17023019Community ExpertCorrect answer
      Community Expert
      May 9, 2022

      Hi.

       

      I think this answer may be helpful:

      https://community.adobe.com/t5/animate-discussions/how-do-i-animate-the-timeline-with-the-mouse-wheel-in-animate-cc/m-p/9974456

       

      Please let us know.

       

      Regards,

      JC

        E
        evolveUKAuthor
        Participant
        May 31, 2022

        Hey @JoãoCésar17023019 ,

         

        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ésar17023019
          Community Expert
          JoãoCésar17023019Community Expert
          Community Expert
          June 6, 2022

          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

          E
          evolveUKAuthor
          Participant
          May 9, 2022

          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.

          N
          Community Expert
          Nick GioiaCommunity Expert
          Community Expert
          April 22, 2022

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

           

          E
          evolveUKAuthor
          Participant
          April 22, 2022

          Hey @Nick Gioia 

           

          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.

          Terms & ConditionsAccessibility statement
          Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices