How to use VueJS transition to create a Text Animation with Clipping Paths

Click the toggle button to see what happeneds.

See the Pen Text animation vue.js by Mattia Vorstenbosch (@iPrime) on CodePen.

Slick animation huh? Let’s see how we do it. it’s surprisingly easy 🙂

Getting Started

First of all with every vue project you need to create your vue instance. for more information on how to set up vue.js read their Vue installation docs.

new Vue({
  el: '#demo',
  data: {
    // "show" is our boolean that we will use to toggle the text elements
    show: true
  }
})

HTML

Next up we’re creating our HTML. Let’s create a button with a “v-on:click” event to toggle our “show” boolean. Wrap your content into the div with id=”demo”, remember we created a vue instance applied to “#demo”.




<div id="demo">
  <button v-on:click="show = !show">
    Toggle
  </button>
</div>


Now let’s add our text with a class “myText” and wrap our text with a “transition” element and give it a name=”myTransition”.



<div id="demo">
  <button v-on:click="show = !show">
    Toggle
  </button>
  <transition name="myTransition">
      <p v-show="show" class="myText">Animation</p>
  </transition>
</div>



CSS

Finally some CSS! In order to make the text seem to disappear behind a mask we have to create a clip-path.

.myText {
 /* this clip-path creates a perfect match with the element */
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}

What this essentially does is creating a path around our text as shown here:


Note: the yellow lines and points are edited in for clarification, this is NOT how it looks like in the browser.

We’re going to animate the text in the Y direction. Essentially 100% down by
transform: translate(0%, 100%).

While at the same time we are animating the clip-path to close. Creating the mask effect where the text ‘disappears’.

Vue.js has this built in transition element that takes care of the class handling. Here’s why we named our transition “myTransition”. Vue takes this name and uses it to create and add classes to the desired html element, in our case the text element. Vue will automatically sniff whether the target element has CSS transitions or animations applied. If it does, CSS transition classes will be added/removed at appropriate timings.

in short. Vue creates those classes. all we need to do is define them in our CSS as follows:

.myTransition-enter-active, .myTransition-leave-active {
  transition: all .5s ease-out;
}
.myTransition-enter, .myTransition-leave-to {
  clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  transform: translate(0%, 100%);
}

Check out a more detailed explanation on transitions in Vue
or watch a video


1 Comment

Erika Pieu @ clipping path · October 16, 2017 at 8:58 am

Great design Hope you will share more.

Leave a Reply

Your email address will not be published. Required fields are marked *

Related Posts

Icons

Font-Awesome icons in your Vue Project

How to add Font-Awesome icons to your Vue Project Getting Started Installation Install vue-awesome(Vue-Awesome is built upon Font-Awesome v4.5.0 and depends on Vue.js v2.0.1+.) into your vue project by running the following command in your Read more…