Need Help in Rotation Animation! - AnimateCSSPlugin.js

[WarenGonzaga]

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

[Jonathan]

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

[WarenGonzaga]

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

[Dipscom]

Here you go Waren: 

See the Pen amwwZJ?editors=0110 by dipscom (@dipscom) on CodePen

[WarenGonzaga]

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! 

[WarenGonzaga]

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

[Dipscom]

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.

[WarenGonzaga]

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

[Jonathan]

Nice Job Dipscom