0 Replies Latest reply on Sep 1, 2014 12:42 AM by PaulCB

    Play a symbol on scroll position

    PaulCB Level 1

      I have found many examples of how this might be done and only one used here, seems to be elegant in its function.

      I.E., the animation triggers in and then as appropriate reverses out.

      However, Once the page is scaled the animations happen out of sync and for some reason, has a double play

      example here. Sample

      My compositionReady code is as follows

       

      var oldPos, newPos;

      //PLAYS FIRST ANIMATION

      $(window).scroll(function(){

       

       

      newPos = $(window).scrollTop();

       

       

      if(!oldPos){

       

       

      oldPos = 0;

       

       

      };

       

       

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

       

       

      //plays the timeline after vertical scrolling 50

       

       

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

       

       

      oldPos = newPos;

       

       

      }else{

       

       

      //reverse play if vertical scrollbar is less than 50

       

       

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

       

       

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

       

       

      oldPos = newPos;

       

       

      }

       

       

      };

       

       

      })

      //PLAYS SECOND ANIMATION

       

       

      $(window).scroll(function(){

       

       

      newPos = $(window).scrollTop();

       

       

      if(!oldPos){

       

       

      oldPos = 0;

       

       

      };

       

       

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

       

       

      //plays the timeline after vertical scrolling 300

       

       

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

       

       

      oldPos = newPos;

       

       

      }else{

       

       

      //reverse play if vertical scrollbar is less than 300

       

       

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

       

       

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

       

       

      oldPos = newPos;

       

       

      }

       

       

      };

       

       

      })

       

       

      $("body").append($("#Stage_WORX").css("position", "fixed"));

       

      Help very much appreciated