Problem when tweening both rotation and position around svgOrigin

Moderator Tag
Go to solution Solved by GreenSock,

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

See the Pen YVqeeZ by nerdmanship (@nerdmanship) on CodePen

Share on other sites

• Solution

SVG1 doesn't work the way you expect because transforms in GSAP are always applied in a very consistent order, and rotation comes before x/y translation.

Here's a fork with a 3rd option that does the math for you with some easy variables you can tweak (like centerX, centerY, radius, angle, etc.):

https://codepen.io/GreenSock/pen/f2b6831fdaf181e128b2b1a5b45f6f3e/

That's a bit more complicated code, but it saves you from having to nest things (fewer elements for the DOM to manage). Is that what you were looking for? It basically figures out the angle and radius and you can animate those on a proxy object and use an onUpdate to apply the values appropriately.

Happy tweening!

• 4
Share on other sites

Thanks for some pretty code and your precious time, Jack! ❤️

I need to touch up my trigonometry to fully understand what's going on. At this point I can't determine if this will solve my problem or not.

The actual project has large parts of it developed already and I depend on a solution in which I can use the x and y values from one elements gsTransform object and the rotation of another.

In the actual project the particles will not be explicitly animated but respond to the coordinates of the colourful rectangles and the rotation value of a group element surrounding them.

(mockup)

My plan is to give each particle its own TweenMax object with its own modifier function feeding x and y values based on values from the leading elements gsTransform object. Here's a simplified part of that:

```TweenMax.to(particle, 1, { x: 0, y: 0, repeat: -1, ease: Linear.easeNone,
modifiers: {
// Distributes the particles exponentially between 0 and the current position of rect
x: function() {
return (indexSq / countSq) * rect._gsTransform.x;
},
y: function() {
return (indexSq / countSq) * rect._gsTransform.y;
}
}
});
```

I'm not sure, but it seems like I could use the intended x/y/rotation values from gsTransform objects to update radius/angle of a proxy to generate x/y values for each particles. The math of it is possibly too advanced for me tho, so I might have to fall back on the SVG 2 style just because I can wrap my head around it.

• 1
Share on other sites

The math probably looks more complicated than it actually is. And ultimately it's all solved for you there - you can tweak radius and rotation however you please to get the effect you want. Oh and wherever you see a " * Math.PI / 180", that's just converting degrees to radians because all the angle-related math functions in JavaScript only understand radians.

So basically in that codepen I gave you, hopefully it's simple enough to allow you to tweak the centerX/centerY and then the radius and angle so that things go exactly where you want, but feel free to ask any questions or tell us where you're getting stuck. Happy to help.

Good luck with the project. Looks like a fun one.

• 4
Share on other sites

A million thanks, Jack!

I went with the less optimal but to me conceptually familiar method. There are so many new concepts to me in this project, so adding another one – even if it's a small one – felt daunting. The methods I ended up using were good enough tho and are silky smooth on all devices I've tested on. Very pleased!

The code is messy but it's working. For sake of learning tho I'm gonna refactor it as soon as I get the chance, and I will definitely use your suggested solution when I do. I sense there's some very usable concepts in there, and I recognise some from Coding Math (as recommended by Blake). Seems to be "animation standards" of sorts and as an aspiring web animator... I kinda like that.

Here is the end result for whoever is interested: https://nerdmanship.github.io/DMSS-Logo-animation/dist/

• 5
Share on other sites

Nice work! Looks good. Thanks for sharing.

• 1
Share on other sites

Really Nice!!!

People get all freaked out when they see trig, but it's really not that hard. Definitely not like what you may have been taught in school. There's really only couple of formulas to remember. Get those down, and you're golden! Everything in the update function here covers over 90% of the trig you'll ever need to use.

See the Pen e50e3e5824be56272223e87c722e2714?editors=0010 by osublake (@osublake) on CodePen

It all comes down to this. Do you know the angle? If yes, use Math.cos(angle) and Math.sin(angle) to find x/y. Otherwise, use Math.atan2(dy, dx) to get the angle. Using those 3 things, you can figure out most stuff.

Sine and cosine are just ratios. Plug any number in there, and it will return a value between [-1,1]. They cycle every 360 degrees, which is Math.PI * 2. The images in this post make it much easier to visualize.

https://greensock.com/forums/topic/15270-animating-waves-with-gsap/?p=66401

Confusing at first? Maybe. Play around with it and should set in really quickly.

.

• 6
Share on other sites

Great demo, Blake. Very clearly illustrates the uses of those trig functions. Had fun studying it... now if only I can remember those things. (favorited)

Share on other sites

Thanks!

Remembering is definitely a problem. I have a bunch of geometry classes to prevent that. Check out what's going on in the timeline here.

See the Pen 69ba220d6d72e755f1d1985b09867eed?editors=0011 by osublake (@osublake) on CodePen

.

• 2