The animation editor

Iride Slider Animation Editor

The Animation Editor is a special feature of Iride Slider that allows you to create fully personalized transitions between slides.
This application comes already with quite a few animations to choose from. With the animation editor you can modify the already existing animations to suit your needs better or create new ones.

The animation editor has a preview area where you can see the animation as you built it. All around the preview area there are the necessary options to create or modify the animation.

The concept behind creating an animation is simple. The preview area displays two hypothetical slides: the one that is GOING OUT of the slider and the one that is COMING IN to the slider. The dashed rectangle in the middle represents the slider view. To create an animation we need to specify the state at which the slides will be before getting into the view and after leaving the view. The application will generate the transition states that will make up the animation.

In the image above for example we have set the animation to create a simple sliding effect. The slide that is going out will move to the left and the slide coming in will come from the right. There are two buttons to play the animation forward and backwards and a reset button to reposition the slides for editing. Playing the animation will make the concept obvious. When you push the play button the outgoing slide will go to the middle of the slider and after a short pause the animation will start and we will see the outgoing slide move to the left side while the incoming will take its place coming from the right side.

A sliding effect

To create animations we need to use the two columns on the right side called IN and OUT. They represent the state of the incoming and outgoing slides before and after the animation. In the example above we have set the translate X of the IN column to 100% moving the incoming slide outside of the slider on the right side. This way we know that the incoming slide will come from the right side of the slider during animation. In the OUT column we have set the translate X field to -100% moving the outgoing slide in the opposite direction. Therefore during animation the outgoing slide will start from the center of the slider moving left and at the same time the incoming slide will move from the right side towards the center of the slider.

A fade effect

One of the most common transition effects in sliders is to fade slides in and out. This is accomplished by simply leaving the slides in the center and setting their opacity to 0. The outgoing slide will fade out while the incoming slide will fade in.

A flipping card effect

Set the rotate Y of the incoming slide to 180 degrees and the outgoing to -180 degrees. That’s it. Just push play.

Lets now explain all the settings more in detail.
As we have already mentioned the two columns on the side represent the state of the coming IN and going OUT slides:

  • Translate X: translates the slide on the X axis. The value is in percentage with positive numbers moving the slide to the right and negative numbers to the left of the slider.
  • Translate Y: translates the slide on the Y axis. The value is in percentage with positive numbers moving the slide below the slider and negative numbers above the slider.
  • Translate Z: translates the slide on the Z axis. This value is in pixels with positive numbers moving the slide towards the viewer and negative numbers away from the viewer in a 3D space.
  • Scale X – Y: these two fields scale the slides in their width and height. A value of 1 is the normal size of the slide. Setting it to 2 will make the slide double the size and a value of 0.5 will make the slide half the size. We can control the scale on the X and Y axis independently.
  • Rotate X – Y – Z: the value of these fields are in degrees. They rotate the slide on the three axis.
    The X axis is horizontal to the view, the Y axis is vertical to the view and the Z axis is towards the viewer.
  • Opacity: this field determines the opacity of the slides. This value ranges from 0 to 1 and they make the slide from transparent to fully visible.
  • Origin: this field determines the origin point of the animation. To understand the concept behind it, lets rotate the slide 45 degrees in the Z axis. Now changing the origin position will affect the rotation. If for example we set it to the top-left corner the slide will rotate around that point instead of the center of the slide.

Playing around with these numbers gives us infinite possibilities. The incoming and outgoing slides can each have different settings. So for example we can make one fade out setting opacity to 0 while the other can zoom in using a negative value in the translate Z field.

The fields present under the preview area allows us to fine-tune the animations.

  • Easing: there are four easing settings, Linear, Ease In, Ease Out, Ease In Out and Spring.
    The best is to test each of them and see which one fits best.
  • Speed: this value is in milliseconds and represents the duration of the animation
  • Perspective: this value determines how pronounced is the effect when the slides are moved or rotated in the 3D space. Smaller values increase the effect while bigger values decrease the effect.
  • Tiles: these two values split the slide into blocks and applies the animation to each block independently. The two values represent the number of columns(x) an rows(y) you want the slide to be divided in.
    The tiles are not visible in the animation editor. To fully see the effect you have to save the animation and apply it to a slider. Because this effect requires good performing devices, the tiles option will be applied only to sliders with a single image per slide. In this way we can guaranty that even mobile devices will play decent animations.
  • Randomize: if you have divided the slides with the tiles setting, when the animation plays they will animate with a slight delay between each other in an ordered sequence. Switching on the randomize option will randomize the order at which the tiles animate.
  • Backface: when you turn an element in a 3D space you can choose if you want the back face of the element to be visible or not when it faces the viewer.
  • Overflow: this option specifies if the animation has to be contained inside the slider or if it will stretch outside of its boundaries.
  • Reverse Z-index: when the slides animate they will be positioned with the outgoing slide on top and the incoming below. Sometimes you want to reverse this condition. If for example you want the incoming image to slide from the top covering the image below you need to reverse the z-index or the image will slide behind the other.
  • Reverse IN-OUT: the animations are played forward and backward depending if you are going to the next or previous slide. To reverse the animations the application will change the values in the IN and OUT columns from positive to negative and from negative to positive.
    Lets say you turn the slide 180 degrees on the Y axis when the animation plays forward. When it plays backwards the rotation will be -180 degrees. This works for many animations as long as the incoming and outgoing slides have specular values. Meaning that if one slide is translated 100% the other is -100%, if one is rotated 90 deg the other will be -90 deg. etc…
    If we animate the slides differently then the reverse animation needs to be made by swapping the values between the two columns. To do this switch on this option.
  • Single direction: you can switch this on if you want the animation to always play in the same direction when going forward or backwards in the slider.

Once you have created your animation you can save it using the menu on the top with the save as button. You can also choose an existing animation in the list on the left. You can save changes to the selected animation or delete the selected animation.

When you create a new animation this will be added to the settings panel under the slider pane.

 

Was this helpful?

Previous Article

The Images Panel