Animation: Move an element (aka translate)

Simple animations can be created with CSS by defining a start and end position and the duration taken to transition between these two states. The CSS then calculates all the intermediate positions for us.

To move an element we can use the translate3d and transition CSS properties.

Translate3D specifies the number of pixels we want to move in the X direction (left to right), Y direction (up and down) and Z direction (into and out of the screen ie, changing which elements appear in front of other elements). In this example we’ll start with the component off screen and then slide it into position.

First we need to identify our element in the HTML and give it a class name so that we can reference it in the CSS and JavaScript. For example, a text component in Fliplet may look like this:

<fl-text cid="86754">
  <p>This is my text</p>
</fl-text>

We can choose any class name we wish. For this example we’ll choose a class called ‘x-position’ and add it into the text component by adding the text class="x-position". See below:

<fl-text cid="86754" class="x-position">
  <p>This is my text</p>
</fl-text>

Then switching over to the CSS panel we can style our element by using the class name. The example below translates any element with the class name of ‘x-position’ by 100% to the right. 100% specifies that the element will be moved by 100% of its width in the x direction (ie, to the right). We’re ignoring the y and z directions and leaving them as zero for this example.

.x-position {
  transform: translate3d(100%, 0, 0);
}

We also want to specify a duration (aka a transition) for any animations applied to our element. Below, we’ve added a transition of 0.1 seconds.

.x-position {
  transform: translate3d(100%, 0, 0);
  transition: 0.1s;
}

Now that we’ve defined our starting parameters we want to define an end state.

To do this we will then create another style which is a combination of two class names. The first class name is the same as before (ie, ‘x-position’) but we’ve added another class name to it of ‘slide-in’. The position we want for the x is now set to zero. We don’t need to redefine the transition duration as this is already associated with anything with the class of ‘x-position’.

The end state of our CSS looks like this:

.x-position.slide-in {
  transform: translate3d(0, 0, 0);
}

The final piece of the puzzle is to animate between the two states. We can do this dynamically with JavaScript by adding and removing the ‘slide-in’ class. Without it we’ll be in the first state but with it we’ll be in the second state.

The code below adds the ‘slide-in’ class to any element with the class ‘x-position’.

$('.x-position').addClass('slide-in');

To reverse the animation and make the element slide out of view, we can simply remove the ‘slide-in’ class.

$('.x-position').removeClass('slide-in');

Placing the above JavaScript straight into your Developer Options panel will mean it gets run immediately (which is often not the intention with animations). If you don’t want to run the JavaScript code immediately, you can run it based on a user interaction or some other trigger. Eg when a user taps a button. See this link for more details.