Jump to content
Search Community

Bounce In Effect with bezeir

newSock test
Moderator Tag

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

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

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