Jump to content
Search Community

Rotating using TweenMax.fromTo

Epiphron test
Moderator Tag

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,




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")



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



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