Jump to content
GreenSock

WarenGonzaga

Need Help in Rotation Animation! - AnimateCSSPlugin.js

Recommended Posts

Hello guys! I need to know how to replicate this animation using GSAP only! I dont have any idea on how to achieve the animation from animate.css. If you have some suggestion please let me know. If you know how to do it please reply. I've used rotateZ but doesn't copy the animation!

 

Here's the codepen link: 

Regards,

Waren

See the Pen rrmXNZ by Waren_Gonzaga (@Waren_Gonzaga) on CodePen

Link to comment
Share on other sites

Hello Warren

Right off the bat I you can first adjust the transform-origin so it is center left .. or 50℅ 0℅

Then use the rotation property which is the same as rotationZ in GSAP to swing the element like the desired effect you want to match.

I will look into this more when I'm at my computer ;)

  • Like 1
Link to comment
Share on other sites

Thanks @jonathan show me how! I am not able to adjust the origin for the rotation so I that's why I need help.

Link to comment
Share on other sites

Hello Warren

 

right off the bat I you can first adjust the transform-origin so it is center left .. or 50℅ 0℅

 

the use rotation property which is the same as rotationZ in GSAP to swing the element like the desired effect you want to match.

 

I will look into this more when I'm at my computer ;)

 

Hi @jonathan! I got it now! Thanks for the Idea here's the solution!

 

 

function swing() {
    TweenMax.set("#object", {transformOrigin: "center top"});
    TweenMax.to("#object", 0.5, {rotation: "+=10"});
    TweenMax.to("#object", 0.5, {rotation: "-=20", delay: 0.5});
    TweenMax.to("#object", 0.5, {rotation: "+=15", delay: 0.5 * 2});
    TweenMax.to("#object", 0.5, {rotation: "-=15", delay: 0.5 * 3});
    TweenMax.to("#object", 0.5, {rotation: 0, delay: 0.5 * 4});
}

Here's the codepen! 

See the Pen rrmXNZ by Waren_Gonzaga (@Waren_Gonzaga) on CodePen

Link to comment
Share on other sites

oh I didn't notice that! thanks @Dipscom! You're awesome!

  • Like 2
Link to comment
Share on other sites

Waren, don't you think you are overcomplicating it with all those tweens and delays?

 

Why not use a simple .fromTo() like the one I showed you?

 

Why not use a timeline? Specially if you are loading TweenMax?

 

If you MUST use a function, you could really make it modular like so:

function swing(element, rotation, duration) {
 this.dur = duration || 0.5;
 this.rot = rotation || 10;
 var tl = new TimelineLite();

 tl.to(element, this.dur, {rotation:"+="+this.rot, ease:Power2.easeInOut})
  .to(element, this.dur, {rotation:"-="+this.rot*2, ease:Power2.easeInOut})
  .to(element, this.dur, {rotation:"+="+this.rot, ease:Power2.easeInOut})

 return tl;
}

Also, watch your eases, the default GSAP ease is Power1.easeOut, it will not be the best ease in all animations. The Getting Started info.

  • Like 5
Link to comment
Share on other sites

Dipscom thanks! for your suggestion! I really appreciate it!

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