Jump to content


Animating on a path (skew, bezier, transform)

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



Newbie here having trouble with animating on a path.


I've managed to create a path using the bezier plugin included in tweenmax, but it is very inconsistent (path seems to be different each time). I'm looking to achieve the appearance of a piece of paper floating from one point to another - so a curved path, skewing, rotating etc.


Any help would be greatly appreciated

var tl = new TimelineLite({paused:true})

var trueTweenPoints = [
	{top:'10%', left:'90%', rotation: 10}, 
	{top:'75%', left:'75%', rotation: 80}, 
	{top:'20%', left:'10%', rotation: 90}

tl.to(".trueTween", 0.8, {bezier:trueTweenPoints, type:"soft", curviness:1.25}); 
.trueTween {
  position: fixed;
  background: red;
  right: 4.5%;
  top: 30%;
  width: 160px;
  height: 300px;
  transition: All 0.4s ease;
  -webkit-transition: All 0.4s ease;
  -moz-transition: All 0.4s ease;
  -o-transition: All 0.4s ease;

See the Pen zBddRO?editors=0010 by jacktest (@jacktest) on CodePen

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