Jump to content
GreenSock

BPolak

DrawSVG onUpdate to get current percentage

Go to solution Solved by OSUblake,

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

TweenMax.staggerFromTo(counterElement.find('g path'), details.speed, {drawSVG:"0", ease:Sine.easeOut}, {drawSVG:details.percentage+"%", onUpdate: function(){console.log(this)} });

The animation works correctly. The onUpdate is working either.

 

Now I want to get the current percentage of the drawSVG in the onUpdate.

I looked in the this result object, but can't find any variable with current percentage.

 

How to achieve this?

  • Like 1
Link to comment
Share on other sites

  • Solution

Try this...

DrawSVGPlugin.getPosition("#myElement");

You can also get the length if you need to do some calculating

DrawSVGPlugin.getLength("#myElement");
  • Like 6
Link to comment
Share on other sites

Thanks OSUblake, I used them both to create a getPercentage.

function getPercentage(element) {
	return Math.floor(DrawSVGPlugin.getPosition(element)[1] / (DrawSVGPlugin.getLength(element) / 100));
}

Working perfectly. 

  • Like 2
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.
×