Skip to main content
evolveUK
Participant
Apr 22, 2022 3:22 PM UTC
Answered

Animate an animation on scroll

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 is closed to new replies. Start a new post to keep the conversation going.
      JoãoCésar17023019
      JoãoCésar17023019Correct answer
      Community Expert
      May 9, 2022 11:10 AM UTC

      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

      View reply

      6 replies

      JoãoCésar17023019
      Community Expert
      JoãoCésar17023019Community ExpertCorrect answer
      Community Expert
      May 9, 2022 11:10 AM UTC

      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

      Translate
        evolveUKAuthor
        Participant
        May 31, 2022 9:18 AM UTC

        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.

        Translate
          JoãoCésar17023019
          Community Expert
          JoãoCésar17023019Community Expert
          Community Expert
          Jun 6, 2022 11:11 AM UTC

          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

          Translate
          evolveUKAuthor
          Participant
          May 9, 2022 11:07 AM UTC

          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.

          Translate
          Community Expert
          Nick GioiaCommunity Expert
          Community Expert
          Apr 22, 2022 4:37 PM UTC

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

           

          Translate
          evolveUKAuthor
          Participant
          Apr 22, 2022 5:05 PM UTC

          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.

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