Jump to content

Roman Kovalev

Cycle "rotation" of element while animating a tween

Go to solution Solved by GreenSock,

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

Hey, guys!


I was wondering: is it possible to make, for example, rotationX from -90 to 90 in cycle while tween is being animated? 


tl.from(element, 1 {rotationX: --from 90 to 90--, y: -1000}) 

- and while this tween is animating the element continues to rotate.

Link to comment
Share on other sites

You mean like this?

var tl = new TimelineMax()
  .from(".box", 1, {y: 100}, 0)
  .fromTo(".box", 1, {rotationX: 90}, {rotationX: "+=360"}, 0)
Link to comment
Share on other sites

Not really. Imaging the element scales from 1 to 0.33 and while its scaling it shakes (rotation to left and to right while the whole animation) and when its back to scale 1 rotation sets to 0. 

Link to comment
Share on other sites

  • Solution

You mean something like this?: 

TweenMax.fromTo(".box", 2, {scale:1}, {scale:0.33, repeat:-1});
TweenMax.fromTo(".box", 0.5, {rotationX:0}, {rotationX:-90});
var shake = new TimelineMax({repeat:-1, yoyo:true, delay:0.5});
shake.fromTo(".box", 1, {rotationX:-90}, {rotationX:90, ease:Power1.easeInOut});

Obviously you can play with the timing and rotational values, but hopefully the concept is clear. I wasn't sure if you wanted it to keep looping either, so feel free to adjust the number of repeats. There are many ways you could organize this. 

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