8 Replies Latest reply on Apr 4, 2014 2:02 PM by jbowden

    scroll event not firing?

    Mark Degallier Level 1

      I'm new to EdgeAnimate and am trying to get a parallax type scroll to work.

       

      I have my browser small enough so scroll bars are displayed.  I have set the stage's overflow to "scroll".  In the Stage "scroll" action I have the following:  console.log("scrolled"); 

       

      But it never fires when I scroll.  What am I missing?

       

      I've added a similar "click" action to a rectangle on the stage and that works.

       

      Thanks for any help.

      -Mark

        • 1. Re: scroll event not firing?
          Mr Gore

          There might be a problem with the yepnope library. YepNope is the code that makes the animations animate as you scroll.

          If this is not assigned properly to the 'Stage' code panel it won't work.

           

          yepnope({

                    load: "libs/EdgeCommons.js",

                    callback: function() {

                              EC.centerStage(sym);

                              EC.Parallax.setup(sym);

                    }

          });

           

          The bold part of the code references the YepNope library. It's located in the "libs" folder. The library file name is "EdgeCommons.js"

          Some tutorials reference this library from the Edgecommons website but in this case the library is in the lib folder (check it in the linked example below).

           

          Working example

           

          Be sure to check out Edge Docks youtube tutorial chanel.

          Oh, and post your working files so people can help

           

           

          • 2. Re: scroll event not firing?
            Mr Gore Level 1

            This thread has working examples on how to make your website scroll to a section when you press a button.

            • 3. Re: scroll event not firing?
              Mark Degallier Level 1

              Thanks for your help. 

               

              Some tutorials don't use this EdgeCommons code ... shouldn't this just work straight from Adobe? Like this one: http://www.adobe.com/inspire/2014/01/parallax-edge-animate.html

               

              I feel like I'll have more control with my own code ... but I can't get the scroll event to fire.

               

              I have my test script running here:

              http://dev.littlelightmedia.com/parallax/Untitled-3.html

               

              Thanks,

              -Mark

              • 4. Re: scroll event not firing?
                hemanthR Adobe Employee

                Scroll event gets trigerred when you move the scroll bar that appears for the stage element ,scroll event added in animate does not trigger when you move the browsers scroll bar.

                In content of link posted ,stage overflow is set to visible not scroll

                1 person found this helpful
                • 5. Re: scroll event not firing?
                  jbowden Adobe Employee

                  Hi there,

                   

                  I think you may be testing for the wrong scroll event. As hemanth mentions, Stage scrolling only occurs if a child element is outside the stage and stage overflow is set to scroll.

                   

                  Instead, the window.scroll event is probably what you are looking for. Try this bit of jQuery on your compositionReady event:

                   

                  $( window ).scroll( function() {

                    console.log("browser window scrolled");

                  });

                   

                  hth,

                  Joe

                  • 6. Re: scroll event not firing?
                    Mark Degallier Level 1

                    Thank you Hemanth and Joe!

                     

                    Your advice got me exactly what I was looking for.  This is what I came up with as a modification of the tutorial (http://www.adobe.com/inspire/2014/01/parallax-edge-animate.html) but for Vertical scrolling:

                     

                    In Stage -> compositionReady:

                     

                    $( window ).scroll( function() {

                     

                        // console.log("browser window scrolled");

                     

                        // Map scroll position to timeline position

                        var animationHeight = 1000;

                        var stageHeight = $(window).height();

                        var scrollPos = $(window).scrollTop();

                        var duration = sym.getDuration();

                        var percent = scrollPos / (animationHeight - stageHeight);

                        var time = duration * percent;

                     

                        // Update timeline

                        sym.stop(time);

                     

                    });

                     

                    Beautiful!

                    Working here: http://dev.littlelightmedia.com/parallax/Untitled-3.html

                     

                    Thanks again!

                    -Mark

                    • 7. Re: scroll event not firing?
                      Mark Degallier Level 1

                      UPDATE for mobile scrolling:

                       

                      // insert code to be run when the composition is fully loaded here

                      $( window ).scroll( function() {

                       

                       

                      // console.log("browser window scrolled");

                      // Map scroll position to timeline position

                      var animationHeight = 2000;

                      var stageHeight = $(window).height();

                      var scrollPos = $(window).scrollTop();

                      var duration = sym.getDuration();

                      var percent = scrollPos / (animationHeight - stageHeight);

                      var time = duration * percent;

                       

                       

                      // Update timeline

                      sym.stop(time);

                      });

                       

                       

                      // for MOBILE SCROLLING

                       

                      $('body').on({

                          'touchmove': function(e) {

                              //console.log($(this).scrollTop()); // Replace this with your code.

                      var animationHeight = 2000;

                      var stageHeight = $(window).height();

                      var scrollPos = $(this).scrollTop();

                      var duration = sym.getDuration();

                      var percent = scrollPos / (animationHeight - stageHeight);

                      var time = duration * percent;

                       

                       

                      // Update timeline

                      sym.stop(time);    

                          }

                      });

                      1 person found this helpful
                      • 8. Re: scroll event not firing?
                        jbowden Adobe Employee

                        Nice! Thanks for sharing, too.

                         

                        cheers,

                        Joe