4 Replies Latest reply on Jan 14, 2014 7:52 AM by Bobby Bol

    Parallax Scrolling with Vertical ScrollBar  : SOLVED

    sunil7862 Level 1

      I am pissed because no support and no reply to my problem thread http://forums.adobe.com/thread/1290045 from adobe and its community staff on the forum.

       

      I made the code for parallax scrolling for vertical sidebar. Hopefully usefull for most of the users.

       

       

      Here is the code :

       

       

      Just create your animation with autoplay off and put the below code in the composition ready for stage :

       

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

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

              var docHeight = $(document).height();

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

              var scrollPercent = (scrollTop) / (docHeight - winHeight);

              var percentageScrolled = (scrollPercent*100)/100;

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

            sym.stop(pos)

      });

       

       

       

      Second: Coding is to play the timeline after scrolling 200 and reverse play if scroll bar is moved up. and Put this code if you want to play your timeline after some scrolling. First do Autoplay off and put the below code in the composition ready for stage.

       

      var oldPos, newPos;

      $(window).scroll(function () {

      newPos = $(window).scrollTop();

      if(!oldPos){

              oldPos = 0;

      };

      if( newPos >= 200 && oldPos < 200){

         //plays the timeline after vertical scrolling 200

          sym.play();

          oldPos = newPos;

        }else{

                //reverse play if vertical scrollbar is less than 200

                if(newPos < 200 && newPos < oldPos && oldPos > 200){

                  sym.playReverse();

                  oldPos = newPos;

             }

         };

      })

        • 1. Re: Parallax Scrolling with Vertical ScrollBar  : SOLVED
          heathrowe Most Valuable Participant

          No need to be pissed since it was a short window of time since your post.

           

          But glad you sorted it out.

           

          Darrell

          • 2. Re: Parallax Scrolling with Vertical ScrollBar  : SOLVED
            sarhunt Adobe Employee

            Wow, this is awesome! Very elegant solution -- thanks for sharing.

             

            Apologies you didn't get a reply to your last response, sometimes it can be easy for things to go unnoticed. Glad you figured it out and also for posting your solution.

             

            Sarah

            • 3. Re: Parallax Scrolling with Vertical ScrollBar  : SOLVED
              sunil7862 Level 1

              I don't like 3-4 months to solve the problem. If it takes months than it is useless and go for the alternative.

              • 4. Re: Parallax Scrolling with Vertical ScrollBar  : SOLVED
                Bobby Bol Level 1

                First -- Sunil -- What a little gem you have here. As Edge will grow in popularity, this code will become enormously useful.

                 

                Second -- There seems to be a little syntax problem with the second part. If you copy the code directly and paste it into Edge, there's a couple of excess spaces that make the code work less fluid.

                Also, I found that the playreverse part didn't always trigger - namely when I scrolled down exactly to where the animation started playing, and then scrolled up again. Solved that by changing the pixel value to 199, now it works beautifully.

                 

                Third -- I'm using this for nested animations. So my sym.play(); and sym.playReverse(); become sym.getSymbol("nestedanimation").play(); and sym.getSymbol("nestedanimation").playReverse();

                Now this works for multiple nested animations if I keep copying the whole code over and over again, but I'm wondering if there's a more elegant way to do this, without having to write tons of ifs and elses when you use more and more nested animations.

                 

                The code as I do it now for reference:

                 

                var oldPos, newPos;

                //PLAYS FIRST ANIMATION

                $(window).scroll(function(){

                 

                newPos = $(window).scrollTop();

                 

                if(!oldPos){

                 

                        oldPos = 0;

                 

                };

                 

                if(newPos >= 200 && oldPos < 200){

                 

                   //plays the timeline after vertical scrolling 200

                 

                    sym.getSymbol("nestedanimation").play();

                 

                    oldPos = newPos;

                 

                  }else{

                 

                          //reverse play if vertical scrollbar is less than 200

                 

                          if(newPos < 199 && newPos < oldPos && oldPos > newPos && oldPos > 199){

                 

                            sym.getSymbol("nestedanimation").playReverse();

                 

                            oldPos = newPos;

                 

                       }

                 

                   };

                 

                })

                 

                //PLAYS SECOND ANIMATION

                 

                $(window).scroll(function(){

                 

                newPos = $(window).scrollTop();

                 

                if(!oldPos){

                 

                        oldPos = 0;

                 

                };

                 

                if(newPos >= 400 && oldPos < 400){

                 

                   //plays the timeline after vertical scrolling 400

                 

                    sym.getSymbol("nestedanimation2").play();

                 

                    oldPos = newPos;

                 

                  }else{

                 

                          //reverse play if vertical scrollbar is less than 400

                 

                          if(newPos < 399 && newPos < oldPos && oldPos > newPos && oldPos > 399){

                 

                            sym.getSymbol("nestedanimation2").playReverse();

                 

                            oldPos = newPos;

                 

                       }

                 

                   };

                 

                })