Jump to content
Search Community

Rotating a cubic bezier type

beamish test
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



First I want to say how impressed I am from GASP! 


My question is: How can I make a cubic bezier type rotate?  


In this

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

 an object is animated on a bezier cubic path, where each leg of the path has it's own time length, color and size, but I cannot find a way to set the rotation.  How can I do that?...


I need a cubic type because I want a different timing for each leg, so I must first create the entire path via bezierThrough() and then animate each leg separately.





Link to comment
Share on other sites

This is an edge case that exposed a slight flaw in the optimization code in CSSPlugin related to transforms (basically, it parses the transforms in one pass and then for each subsequent transform property, it skips it because it was already parsed, but since you're using a bezier plugin for handing the x/y, and ALSO using a regular CSSPlugin to do the rotation, that part was getting ignored). The solution right now is to simply use a separate tween for that. See the forked pen: 


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