Jump to content
GreenSock

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

Bounce In Effect with bezeir

Go to solution Solved by Diaco,

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

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.

Link to comment
Share on other sites

Hi and welcome to the GreenSock forums,

 

As Diaco said, the Ease Visualizer is the best place to start.

 

It really helps if you provide a demo for the effect as its quite difficult to visualize the code of CSS animations that use cubic bezier values. 

We recommend using CodePen: http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/

 

Here is a demo of both a Bounce and Elastic ease in using our standard eases:

http://codepen.io/anon/pen/MwNJrW

  • Like 1
Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • Solution

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

  • Like 3
Link to comment
Share on other sites

Nice job Rodrigo. Thanks for the assist. Very few people know that the BezierPlugin can handle more than positional properties (x/y). 

  • Like 1
Link to comment
Share on other sites

Nice job Rodrigo.

Huhh?? :huh:

 

You're thanking the wrong moderator buddy, perhaps not enough coffee today? ;) 

 

I appreciate the encouragement, but I'm not sure how good it is that you thank me for not doing anything  :blink:

  • Like 3
Link to comment
Share on other sites

oops. the wires got crossed. needed a reboot. systems appear to be running normally ;)

Link to comment
Share on other sites

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. 

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