Create your account

Already have an account? Login here

Note: By joining, you will receive periodic emails from Coursetro. You can unsubscribe from these emails.

Create account

CSS Cubic-Bezier Animations Tutorial - Awesome Page Transition Animations

By Gary simon - Mar 04, 2018

In a previous tutorial, we used Vue to create page transition animations. I wanted to use the same project from that tutorial for the basis of this really quick technique today.

If you're unfamiliar with CSS's Cubic-Bezier function, it's time to end the ignorance! It allows you to fine-tune the curve from which a given object is animated using four points. This allows you to take a simple animation that goes from point A to point B on an X or Y axis, and control the location and speed at which it arrives to point B.

When we combine cubic-bezier with page transition animations, it provides us with an extra layer of control over how these page transitions take place.

Let's get started!

We have some pretty awesome courses

Check them out

If you prefer watching a video..

Be sure to Subscribe to the Official Coursetro Youtube Channel for more videos.

Using our Existing Project

As I mentioned above, we will be using the code generated from the previous tutorial here. I've created a github repo that you can use to quickly clone the example project and then modify it as we go along.

Clone the repo below:

https://github.com/designcourse/vue-2-router-animations

Transition Mode Fix

In the previous tutorial, I made a mistake. I forgot to specify mode='out-in' on the transition element. Oops! This negates having to set position: fixed on the .page class. 

Make the following adjustments to /src/App.vue:

<transition name="router-anim" mode="out-in">

And remove the two properties that are currently inside .page:

  .page {

  }

The Current Behavior

Now, save the file and run yarn serve in the console and click back and forth on the navigation.

You'll see a nifty little fading and moving animation between the pages. You can further control this with cubic-bezier! It's actually dead simple.

Integrating a Cubic-Bezier Animation

In the same App.vue file (this is the only file we will work in), add the animation-timing-function property as shown below:

  .router-anim-leave-active {
    animation: going 1s;
    animation-timing-function: cubic-bezier(.8,-0.49,.36,1);
  }

If you save it and click between the navigation links, you will see now that when a page leaves, it actually shifts over and it's no longer a static, boring tween animation from point A to point B.

To illustrate this concept a little better, let's make some adjustments to the animation and CSS itself. Remove all of the code within the <style></style> elements of our Vue component and paste this:

@import "https://cdn.jsdelivr.net/npm/animate.css@3.5.1";

  body {
    background: rgb(233, 233, 233);
    font-family:Arial, Helvetica, sans-serif;
  }
  html, body {
    height: calc(100% - 50px);
  }

  .page {
    background: #ffcc00;
    padding: 30px;
  }

  #nav {
    padding: 30px;
  }

  #app {
    background: #fff;
    width: 50%;
  
    border-radius: 10px;
    margin: 50px auto 0 auto;
    height: calc(60% - 50px);
    overflow: hidden;
  }

  .router-anim-enter-active {
    animation: coming 1s;
    animation-timing-function: cubic-bezier(.65,0,.32,1.55);
    opacity: 0;
  }

  .router-anim-leave-active {
    animation: going 1s;
    animation-timing-function: cubic-bezier(.8,-0.49,.36,1);
  }

  @keyframes going {
    from {
      transform: translateY(0);
    }
    to {
      transform: translateY(300px);
      opacity: 0;
    }
  }

  @keyframes coming {
    from {
      transform: translateY(300px);
      opacity: 0;
    }
    to {
      transform: translateY(0px);
      opacity: 1;
    }
  }

Not much as changed, with exception to some stylistic changes and the values of coming and going animations.

Now, if you save and view the result in the browser, the effects of cubic-bezier animations are much more noticeable.

Controlling your Cubic-Bezier Values

There's a really nifty web-based UI for creating your own cubic-bezier values.

Visit Cubic-Bezier.com.

You're able to adjust the curve on the left and it will provide you with the 4 values necessary to create such a curve for the cubic-bezier() CSS function.

You can preview it and compare it against a standard linear animation. Try creating your own curves and replacing the values within our project!

Conclusion

As you can see, cubic-bezier allows you to create awesome animation for page transitions. 

See you next time!

 


Share this post




Say something about this awesome post!