[Bounce In Effect with bezeir]

Hi newSock 

 

Seems you're not really newbie 

anyway , if you want exactly same tween , pls try like this : 

See the Pen WvVZNj by MAW (@MAW) on CodePen

 

I started couple of days ago.

 

I was reading the bezier plugin docs and could not find what was required. Anyways thanks for the demo. I think this will work. 

[Bounce In Effect with bezeir]

Very helpful, thanks!

 

Perhaps something like this?

 

See the Pen MwNpGv?editors=001 by GreenSock (@GreenSock) on CodePen

 

Thanks for that! Isn't it possible to get the exact same effect? Why the text is more blurry (on hover) when using TweenMax? Also I was wondering how the bezier plugin will work for cubic-bezier(0.47, 2.02, 0.31, -0.36) since it works differently like bezier:{type:"cubic", values:[{x:100, y:250}, {x:150, y:100}, {x:300, y:500}, {x:500, y:400}] making use of the x,y values.

[Bounce In Effect with bezeir]

Hi guys,

 

I am really unsure on how to use TweenMax with bezier. I have created CSS demo for the animation.

See the Pen pJMRXj by gautamthapar (@gautamthapar) on CodePen

Please guide me on how to achieve such an animation with TweenMax. Thanks!

[Bounce In Effect with bezeir]

Hi,

 

I am new to TweenMax and I am not sure how I can achieve the below CSS animation.

@keyframes bounceIn {
  0%, 20%, 40%, 60%, 80%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }

  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3); }

  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1); }

  40% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9); }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03); }

  80% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
    transform: scale3d(0.97, 0.97, 0.97); }

  100% {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1); } }

Looking forward to some help.