Jump to content
Search Community

How to get current step of an animated attribute?

Silly-V test
Moderator Tag

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

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.
×
×
  • Create New...