Jump to content

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

Rotating using TweenMax.fromTo

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

Share this post

Link to post
Share on other sites

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

Share this post

Link to post
Share on other sites

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

Share this post

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.