Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
jbisere

Animating on a path (skew, bezier, transform)

Recommended Posts

Hi,

 

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