3 Replies Latest reply on Sep 5, 2013 5:57 AM by heathrowe

    Defining custom easing in code


      Part of my project includes a slider that is dynamically given a position. Because this all happens in code, I can't use the timeline tool to change the easing to something like "easeOutBounce."


      This seems to follow the jQuery convention but results in the standard easing:


      sidebarSymbol.$("slider").animate({top: sidebarSymbol.sliderPositions[scene]}, 750, "easeOutBounce", sym.playNext());



      What am I missing?

        • 1. Re: Defining custom easing in code
          heathrowe Most Valuable Participant

          Its hard to determine how you arrived at your symbol references and property variables but it looks like (at first glance) your complete function is not properly set. the complete function is the final parameter within the animate method: the one that falls after the last COMMA (,).


          See the below example and how it is structured. The item I have in bold is how the last parameter should be structured. Note I do not know your project file structure so I did a small example on a element called "Text", and substituted you playNext() with an alert. Just to show you how it works. More details here.



          ///// compositionReady Code //////


          sym.$("Text").animate({top: '-=100px'}, 750, "easeOutBounce", function() {

               // Complete fuction code here


               alert( "Animation Complete" );







          1 person found this helpful
          • 2. Re: Defining custom easing in code
            conan_h Level 1



            Thanks so much for your response. The function is not the problem; it works just fine. However, your code example helped me figure what the problem was.


            For some reason, feeding in just a number (i.e. without "px" at the end) in the css statement, moved the slider to the right position, at the correct timing, and called the function at the end. However, it messed up the easing type. Appending the string "px" to the variable fixed it.


            So, the correct and working code now is:


            sidebarSymbol.$("slider").animate({top: sidebarSymbol.sliderPositions[scene]+"px"}, 750, "easeOutBounce", sym.playNext());






            • 3. Re: Defining custom easing in code
              heathrowe Most Valuable Participant

              Super - glad you figured it out


              By the way here is a nice 'easing' cheetsheet reference site: http://easings.net/