Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Silly-V

How to get current step of an animated attribute?

Go to solution Solved by Carl,

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

Hi, greetings! I am a complete newbie and am very excited to get started learning GSAP for SVG animation.
 

Right now I have one of the most basic questions: can I get a current step of a transform attribute component from an affected SVG shape using GSAP? I noticed that the amazing and intuitive capability of GSAP turns transform attribute parts into a matrix and I've come across https://css-tricks.com/get-value-of-css-rotation-through-javascript/ which is what I'll resort to outside of this forum.

 

However, I have to ask if there's already a native GSAP method of doing this. My goal is to simply keep track of transform values in units, such as rotation of a clock-arrow, using an onUpdate function.

tl.fromTo(
	elem,
	duration,
	{
		rotation : oldAngle,
		transformOrigin : "50% 50%"
	},
	{
		rotation : newAngle,
		transformOrigin : "50% 50%",
		ease: myEase,
		onUpdate : function(){
			// elem.currentRotationAngle = ?
		}
	},
	myLabel
);

Thanks, and thanks to all who made this code available for the people of Earth.

Link to comment
Share on other sites

  • Solution

Hi and welcome to the GreenSock forums,

 

When you perform a transform on an element GSAP will attach a _gsTransform object to that element.

The _gsTransform  object will hold properties like x, y, scaleX, scaleY, skewX, rotationY etc.

 

Master Rodrigo made this demo many moons ago which should illustrate it nicely for you:

 

http://codepen.io/rhernando/pen/FxHhm?editors=001

  • Like 4
Link to comment
Share on other sites

  • 2 weeks later...

How cool is that! Thanks for your help and the link, I didn't even know this was happening, it doesn't cease to surprise me with amazements!

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.
×