Jump to content
GreenSock

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

Rotating using TweenMax.fromTo

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 all, I'm trying to create a rotation that goes from 20 to -20, but starts at 0 (and ideally ends at 0).

 

I've tried using the startAt property to set the inital rotation, but it doesn't seem to work as expected (please see codepen).

 

Could someone explain why the startAt property doesn't set the rotation to 0 and if I'm using fromTo correctly, or I need to do this animation in a different way?

 

Thanks in advance! 

See the Pen YPMapV by jwhayman (@jwhayman) on CodePen

Link to comment
Share on other sites

  • Solution

Thanks for the demo.

 

A single tween has a single start value and a single end value.

 

You can't say I want you to rotate from 20 to -20 but start and end somewhere else (like 0).

 

The reason startAt didn't work, is because it isn't intended to be used with from() tweens. A from() tween is designed to already allow you to set the start values.

 

startAt is really only helpful in odd cases where you want a to() tween to start somewhere different than the current state.

 

However, if you simply want your from rotation:20 to rotation:-20 tween to remain at rotation:0 until the delay expires you could set immediateRender:false.
 

TweenMax.fromTo('#box', 1, {
  rotation: 20, 
},
{
  rotation: -20,
  delay: 1,
  repeat: -1,
  repeatDelay: 1,
  yoyo: true,
  immediateRender:false;
});

 

http://codepen.io/GreenSock/pen/LEvmpe

 

You will notice that the box stays at rotation:0 for 1 second and then abruptly jumps to 20 and tweens to -20.

 

I get the sense though that you probably want to 

 

start at 0

animate to rotation 20

animate to rotation -20

... repeat rotation back and forth a few times ...

animate back to rotation 0

 

So to achieve this you would need a sequence of tweens, which is what our Timeline tools are for.

 

var box = document.getElementById("box")
var tl = new TimelineLite({delay:1});


tl.to(box, 0.25, {rotation:20})
  .to(box, 0.5, {rotation:-20, ease:Power1.easeInOut, repeat:3, yoyo:true, repeatDelay:0.5}, 0.5)
//end at 0
  .to(box, 0.25, {rotation:0}, "+=0.5")

http://codepen.io/GreenSock/pen/zxXjqw?editors=001

 

If you need to get up to speed on timelines please read and watch:

http://greensock.com/timelinelite

http://greensock.com/position-parameter

  • Like 2
Link to comment
Share on other sites

Hey Carl, thanks for your comprehensive reply  :-)  I'll use the example timeline for the animation.

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