2 Replies Latest reply on Aug 25, 2015 2:21 AM by Lennert Schrader

    Overwriting Keyframes with jQuery

    Lennert Schrader

      Hello hello,

      I've got a little challenge that I cannot seem to crack.

      The situation is as following:

       

      I've got an element on my stage. I animated its position to move from here to there.

      Now, I want to be able to interrupt that movement, so that when a button is pressed, the element moves to a different place (let's say the top left corner).

      As long as I have no keyframes my code seems to work fine.

       

      sym.$("myElement").animate({

        "left": 0,

        "top": 0

      });

       

      The element can be placed wherever on my stage, and when the .animate() function is called, it moves to where it should.

       

      However, as soon as I have keyframes on the properties that I want to animate, nothing happens. Even when I stop my timeline.

       

      Any ideas?

       

      Cheers,

      Lennert

        • 1. Re: Overwriting Keyframes with jQuery
          resdesign Adobe Community Professional & MVP

          I think it is because you have to detect where the element is and compare

          with the stage.

          Try something like this - the button will be clicked only once here since

          there is a conditional for the click event.

           

          i=0;

          sym.$("button").bind('click',function(){

          if(i==0){

          var getTop = sym.$("Rectangle").offset().top;

          var getLeft =  sym.$("Rectangle").offset().left;

          var stageTop = sym.$('Stage').offset().top;

          var stageLeft = sym.$('Stage').offset().left;

          //sym.$("Rectangle").css({'top':stageTop-getTop,'left':stageLeft-getLeft});

          // Hide an element

          sym.$("Rectangle").animate({'top':stageTop-getTop,

          'left':stageLeft-getLeft});

          }

          i=1;

          });

           

          On Mon, Aug 24, 2015 at 9:37 AM, Lennert Schrader <forums_noreply@adobe.com>

          • 2. Re: Overwriting Keyframes with jQuery
            Lennert Schrader Level 1

            Thanks for the fast reply!

            And I see now where the issue was!

             

            As long as my element doesn't have any keyframes, I can put the absolute position, to move it to the top left corner. Just the way I did it before.

            But, when the element has keyframes, the relative position to the destination needs to be put in, just like you explained it!

             

            Thank you so much!

             

            And the technique with the if function and i to make sure that the click only fires once is pretty neat at well!

             

            Cheers,

            Lennert