Jump to content


Including easing in progress()

Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts



for animating the strokeDasharray attribute in an svg element, i use the onUpdate callback and then progress(). Now i recognized, that progress is not including easing.


I have made a simplified example in the codepen, that does not use strokeDasharray, but simply position, the issue remains the same.


So my question is, how can i include the easing in my own animation, when using onUpdate?

See the Pen jEaOBV by anon (@anon) on CodePen

Link to comment
Share on other sites

Hi Ghost23 and welcome to the GreenSock forums.


Thanks so much for providing the reduced demo. Very helpful.


The issue here is that progress() does not fluctuate based on the type of ease being used.

an ease only effects the values that are being tweened. The time() and progress() of a tween always move forward regardless of how the ease effects the values being tweened.


I modified your demo to illustrate this and also show you how you can tween the value of a proxy object and then apply it to whatever you want: http://codepen.io/GreenSock/pen/QwOjdK?editors=101


If you want more advanced control over animating svg strokes, you might find DrawSVGPlugin helpful: http://greensock.com/drawSVG

  • Like 3
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.