12 Replies Latest reply on Nov 3, 2015 12:06 PM by kevinneal

    Start an animation when it's scrolled to?

    zkman11

      Ask google this question and all directions point to one man's script:

      Re: Getting an Animation to start when you scroll to it on the page.

      http://www.raymondcamden.com/index.cfm/2013/7/11/Delaying-an-Edge-Animate-asset-until-visi ble--Part-2

       

      He no longer uses Edge animate and after looking at my project (zaksportfolio.com/podify) assumes an update has made his code obsolete. If you look at my demo page the blank white section is where the animation should begin (when it's told to play for being on screen).

       

      When I use his code, pasted below, I get this console error on the page: Uncaught TypeError: Cannot read property 'top' of undefined.

       

      I'm not too familiar with jquery - I just use bits and pieces and tweak them until it gets the job done. This problem has stumped me for awhile. Anybody figure out a way to start an animation only when it's in view? Anyone with an animation lower than the page fold can assume their animation is done before viewer gets to it so it seemed like it would be a common problem to me but maybe not.

       

      Thanks for any help!

       

      ---

       

      Symbol.bindSymbolAction(compId, symbolName, "creationComplete", function(sym, e) {

         // insert code to be run when the symbol is created here

       

       

        //http://stackoverflow.com/a/488073/52160

        function isScrolledIntoView(elem) {

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

        var docViewBottom = docViewTop + $(window).height();

       

       

        var elemTop = $(elem).offset().top;

        var elemBottom = elemTop + $(elem).height();

       

       

        return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom)

         && (elemBottom <= docViewBottom) &&  (elemTop >= docViewTop) );

        }

       

       

        $(window).on("scroll", function(e) {

            if(isScrolledIntoView(sym.element)) {

                sym.play();

            } else {

                sym.stop();

            }

       

       

        });

       

       

      });

      //Edge binding end

       

      ---

        • 1. Re: Start an animation when it's scrolled to?
          jhtmk Level 3

          I'm working on something similar at the moment - I calculate the scroll position and use that position to trigger a symbol to show and then play, then I also get it to reset if the user scrolls back up. It resets so if they scroll back down it will trigger again

           

          I am like you - I use bits and pieces and tweak until the job is done, this works for me so I hope it can be of benefit to you too

           

          You can calculate and inject the scroll position directly onto your page with:

           

          function checkScroll(){

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

           

           

           

            $('p').html('scrollPos = '+scrollPos);

           

          }

          ------------------------------------------------------------------------------------------ ------

          Once you know your scrollPos you can use the following

           

          //Playing symbols based on scroll position

           

           

          sym.setVariable("symbolPlayed", false);

           

           

           

           

          var mySymbolObject = sym.getSymbol("yourSymbolToPlay");

           

           

          //change the number of scroll_pos to whatever you calculated

           

          $(window).scroll(function() {

              var y_scroll_pos = window.pageYOffset;

              var scroll_pos = 282;         

           

           

           

           

                 if(y_scroll_pos > scroll_pos) {

          var symbolPlayed = sym.getVariable("symbolPlayed");

          if (!symbolPlayed) {

              sym.$("yourSymboToPlayl").show();

              mySymbolObject.play("start");

           

           

              sym.setVariable("symbolPlayed", true);

            }

           

           

           

           

            } if(y_scroll_pos < scroll_pos){

           

           

            sym.setVariable("symbolPlayed", false);

           

           

            }

           

           

          });

          • 2. Re: Start an animation when it's scrolled to?
            zkman11 Level 1

            Hey thanks for the help.

             

            I tried using your code and wasn't able to get it to work yet. I noticed you had a typo "yourSymboToPlayl" - is that where i'm supposed to place my own symbol name? would I just put 'Stage' there?

             

            I get this console error as well: Uncaught TypeError: Cannot read property 'play' of undefined

             

            Also the checkscroll function - that script goes in my actual html page?

            • 3. Re: Start an animation when it's scrolled to?
              jhtmk Level 3

              Yeah sorry that was a typo, For my project I'm doing all of the triggering inside edge in the compositionReady, and I have a seperate js script included in my project, which I use the bootstrapCallback to access the composition - that has the checkscroll function, but I don't see why you can't include it in an html page in script tags - it's only while you are developing to get the number, then you can get rid of it.

               

              I'm really not sure I think 'Stage' may work but if you are not wanting to trigger anything inside your actual edge project like I am via compositionReady, then I think this method should still work but you would have to use bootstrapCallback

               

              eg.

              AdobeEdge.bootstrapCallback(function(compId){

               

              var myComposition = AdobeEdge.getComposition('YourCompositionId');

               

              };

               

              Theres a bit of documentation out there on this - I'm not an expert but basically this allows you access and control of your composition externally

               

              And I could possibly be wrong or there may be a much easier way to achieve what you want - it's just what is working for me

              • 4. Re: Start an animation when it's scrolled to?
                jhtmk Level 3

                Sorry I've just been copy and pasting the relevant bits from my own project and forgot to include the   $(window).on('scroll',function(){

                 

                 

                            $(window).on('scroll',function(){

                                checkScroll();

                 

                 

                 

                 

                 

                 

                     

                            function checkScroll(){

                 

                 

                       

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

                      

                $('p').html('scrollPos = '+scrollPos);

                               

                            }

                               

                            });

                • 5. Re: Start an animation when it's scrolled to?
                  jhtmk Level 3

                  I'm thinking something like this may work for you, maybe try including the checkScroll function within this if it's not working, or maybe someone with better jquery /javascript experience can fix/ tweak this to suit your project 

                   

                   

                  ====================================================================

                  AdobeEdge.bootstrapCallback(function(compId){

                   

                   

                    //Access your edge composition (change to whatever your edge composition class is and the name of symbol to play)

                   

                    var myAnim = AdobeEdge.getComposition("yourCompositionClass");

                    //access your symbol

                    var mySymbol = myAnim.getSymbols("yourSymbol")[0];

                   

                         

                         

                         

                    //Playing symbols based on scroll position

                   

                   

                  sym.setVariable("symbolPlayed", false);

                   

                   

                   

                   

                  var mySymbolObject = mySymbol;

                   

                   

                  //change the number of scroll_pos to whatever you calculated

                   

                  $(window).scroll(function() {

                      var y_scroll_pos = window.pageYOffset;

                      var scroll_pos = 282;        

                   

                   

                   

                   

                         if(y_scroll_pos > scroll_pos) {

                  var symbolPlayed = sym.getVariable("symbolPlayed");

                  if (!symbolPlayed) {

                    

                     

                      //Add a label "start" on the timeline of your symbol to be played

                      mySymbolObject.play("start");

                   

                   

                      sym.setVariable("symbolPlayed", true);

                    }

                   

                   

                   

                   

                    } if(y_scroll_pos < scroll_pos){

                   

                   

                    sym.setVariable("symbolPlayed", false);

                   

                   

                    }

                   

                   

                  });

                   

                   

                   

                  });

                  • 6. Re: Start an animation when it's scrolled to?
                    zkman11 Level 1

                    No luck yet. I just replaced all the "yourSymbol" and "symbolPlayed" with "Stage" which may not work.

                     

                    Still getting this error too: Uncaught TypeError: Cannot read property 'play' of undefined

                    • 7. Re: Start an animation when it's scrolled to?
                      zkman11 Level 1

                      anybody have a script for this that can just be dropped into the stage actions without modifying any of the code/symbols? i'm not knowledgeable enough yet to piece the right things together.

                      • 8. Re: Start an animation when it's scrolled to?
                        mrgrymm Level 1

                        Read through parts 1-6. http://www.raymondcamden.com/?s=Edge+Animate&submit=Search

                         

                        It works but my only issue is getting it to work with multiple compositions on 1 page

                        • 9. Re: Start an animation when it's scrolled to?
                          zkman11 Level 1

                          Yeah those blog articles were the first I saw addressing this problem but none of the examples have worked for me. I talked with the author and had him check my demo page but even he wasn't able to see the issue and no longer works with edge animate.

                          • 10. Re: Start an animation when it's scrolled to?
                            zkman11 Level 1

                            Wow, nevermind. I had tried pretty much every sample of code in all 6 articles with no luck. Wish I had a better explanation for what the issue was but the article you linked to with the most recently updated code just worked. No idea what I did different'y but thanks for posting and helping me persist with it!

                            • 11. Re: Start an animation when it's scrolled to?
                              mrgrymm Level 1

                              I've re-written the code, place it in compositionReady:

                               

                              =============

                              var check = 0;

                               

                              function checkAnim(){

                                if(check == 0){

                                sym.play(0);

                                check = 1;

                                return check;

                                }

                              }

                               

                              $(window).scroll(function(e) {

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

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

                                if(y+h > sym.getSymbolElement().position().top){

                                checkAnim();

                                }

                              });

                              =================

                               

                              You can download it here Dropbox - test5.zip

                              The only issue is if you try to use it with mulitple composions. Maybe you can figure it out? How to resolve javascript error in Edge 6.0.0 resulting from multiple compositions using the same function? (Javascript error in event handler! Event Type = symbol)

                              • 12. Re: Start an animation when it's scrolled to?
                                kevinneal

                                I have his working with multiple compositions. I have 3 on one page, by placing this code into all 3 of them

                                 

                                (note: I have added a buffer zone because the animation wasn't getting triggered on a small screen

                                 

                                  Symbol.bindSymbolAction(compId, symbolName, "creationComplete", function(sym, e) {

                                 

                                  function isScrolledIntoView(elem) {

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

                                var docViewBottom = docViewTop + $(window).height() + 190; //Adjust this number to match the 2nd one below

                                 

                                 

                                var elemTop = $(elem).offset().top - 190; //This number adds a buffer zone of 100px of scroll to trigger the animation. It should be the same number as above.

                                var elemBottom = elemTop + $(elem).height();

                                 

                                 

                                return ((elemBottom >= docViewTop)

                                && (elemTop <= docViewBottom)

                                && (elemBottom <= docViewBottom)

                                && (elemTop >= docViewTop) );

                                 

                                 

                                  var element=sym.getSymbolElement();

                                if(isScrolledIntoView(element)){

                                sym.play(0)

                                }else{

                                var handler;

                                handler=function(e){

                                if(isScrolledIntoView(element)){

                                console.log('Start me up');

                                sym.play(0);

                                $(window).off("scroll",handler);

                                }

                                };

                                $(window).on("scroll",handler);

                                }

                                 

                                 

                                 

                                 

                                      });