5 Replies Latest reply on Apr 3, 2014 5:23 PM by TimJaramillo

    Scroll Timeline in a Div?

    bart_mc Level 1

      Example: http://www.bartmclaughlin.com/scroll_div/scroll_div_v1.html


      Edge project: https://www.yousendit.com/download/elNJc2ZOR0Y1R1BWUThUQw


      Now I want to control the timeline of a symbol on the stage using scroll. I’ve posted an example above, with a button that scrolls down the div.


      I don’t know how to simultaneously scrub the div’s timeline when scrolling in the div.


      This code below (that I got from Tim Jaramillo’s post here: http://forums.adobe.com/message/5058756#5058756) will scrub the timeline of the Stage when it’s placed in the Stage.scroll event, but I don’t know how to use it to scrub the timeline of my symbol.


      var myCalc = e.currentTarget.scrollTop/(e.currentTarget.scrollHeight-e.currentTarget.clientHeight);

      var pos = Math.round( myCalc * sym.getDuration() );



      This question is similar to my question here: http://forums.adobe.com/message/6263651#6263651

      that was answered by hemanth kumar r. Thank you!



        • 1. Re: Scroll Timeline in a Div?
          TimJaramillo Level 4

          Hi there,


          Here is an example:



          Here is the source:




          Since you aren't using the Stage.scroll method, you shouldn't put your code in that event. I think there was some confusion there.


          1) So, start by removing your code from Stage.scroll event.


          2) Place the below code on your button click event (calls function on Stage.compositionReady):



          3) Place the below code on Stage.compositionReady:


          // timer constantly runs to check scroll position, and handle timeline scrubbin'

          var timerScroll = setInterval(function() {


          }, 10);



          // this function is called on click of your button

          sym.onClick = function()






          sym.scrubTimelineScroll = function()


          // calulate percent scrolled

                    var myCalc = sym.$("parent").scrollTop()/sym.$("parent")[0].scrollHeight;

             // get percent of timeline length

                    var pos = Math.round( myCalc * sym.getSymbol('parent').getDuration() );


          //scrub timeline



          • 2. Re: Scroll Timeline in a Div?
            Feloxor Level 1

            Thank you so much TimJaramillo !!! YOU ARE MY HERO !

            • 3. Re: Scroll Timeline in a Div?
              bart_mc Level 1

              Tim, this is awesome, thank you!


              I'm just having one problem - scrolling the symbol only scrubs about half of the timeline. Can I modify the code in compositionReady to control how much of the timeline gets scrubbed?


              Thanks again -



              • 4. Re: Scroll Timeline in a Div?
                bart_mc Level 1

                I solved my own "scrub the whole timeline" problem.


                I added *1.75 to the end of the next-to-last of code in compositionReady, like this:


                var pos = Math.round( myCalc * sym.getSymbol('parent').getDuration()*1.75);


                When I change that number, it apparently changes how much of the timeline gets scrubbed when scrolling. 1.75 is giving me 100% of this particular timeline.


                Thanks again to Tim J. for his excellent guidance!



                • 5. Re: Scroll Timeline in a Div?
                  TimJaramillo Level 4

                  Awesome, glad you guys got it working! And I'm happy to be of help!