Animations and fancy transitions catch the user’s attention, and make them want to spend more time on a page, therefore they are often used on websites in different ways. Sometimes, these animations are just small and simple things like when a button changes its background color when the mouse is over it or does some other cool-looking animation on the same event. But it is also a common usage to make different elements appear when the user scrolls down on the page. Web designers are very creative when it comes to show an eye-catchy animation, and they never fail to amaze the visitors with their ideas.
In most cases, these simple animation doesn’t need to be maintained or partially changed after a while. However, when you create more complex animations, you’ll welcome the possibility to see and manage these complex animations in a simple, easy to use timeline.
Animations at the Timeline
The three layer animation queues (In, Loop, Out) are visible on the timeline, and they are all shown using a different color. The blue color shows the In animation, the green is for Loop and the gray shows the Out animation for each layer. From the timeline, you can control the delay and the duration of the animations.
The Split text animations that are available just for the heading layers are only partially present on the timeline. This means that only the Split text in animation appears, and it has limitations, that only the delay of the animation can be changed on the timeline. (The reason behind this is that the split text animations are basically the same as the simple in / out animations, but these happen on the actual text and not on the whole layer. A heading layer can have both layer in/out and split text in/out animations at the same time, and because of this, it needs multiple rows to be shown, however, timelines can handle one row per layer.)
Timeline uses a visual way to display your layer animations, and the time period where they will be shown. It can be used to adjust the already added animations duration and delay, or to add new animations. The animation manager window for the selected animation can be opened up when the animation is clicked, to allow the animations to be edited directly.
Did you know you can hide the Sidebar to increase the size of the Timeline and the Slide configuration area? Just press the Collapse sidebar button on the Secondary navigation bar.
Add new animation
You can add new layer animations when you right click on the layer name at the timeline. From the popup you can choose to add a new IN, LOOP, or OUT layer animation respectively. Clicking on any of these buttons will open the animation manager as if the Add button was clicked on the layer.
Copy existing animations
You can copy layer animations from layer to layer by right-clicking on the layer and clicking on Copy where you would like to copy the animations from. Then you can right-click on any other layer and choose Paste to add the copied animation to the layer.
Of course, there is a faster way to copy animations from a layer to other ones. Just select the layer where you would like to copy the layer animations, press and hold the CTRL button on Windows and CMD button on MAC, then click on the layers where you would like to paste the animation.
Copying the animation in either way will result each and every animation to be copied. You can’t copy individual animations, but once every animation is copied, you can remove those that you don’t need.
When animations are added to the layer, a trash icon will appear right before the timeline. When this button is clicked it will remove every animation from that layer. To remove individual animations, simply right click on the layer, and select which animations (in, loop or out) you would like to remove.
You will find a play/pause and a stop button at the top of the timeline. These buttons can be used to start, pause/resume and stop the layer animations, when they are in progress on the canvas. Additionally, you can drag the playhead to make the animation play as you would like it to, or just to check a specific animation over and over again to see if it animates just like you want it to.
You can press the Spacebar to start / pause the layer animation, and you can use the Escape key to stop it.
Increasing the timeline size
When you work with lots of layers and layer animations, being able to increase the size of the timeline can be a great help, especially if you use a smaller monitor. There are two ways to do that.
The first way is to hide the sidebar using the Collapse sidebar button (the button before the Slider settings text) on the Secondary navigation bar. Hiding the sidebar will give you a large amount of extra pixels to handle your timeline. This will allow you to see a longer time period to manage your animations.
The second option is to resize the timeline itself, which can be done by dragging the “three dots” below the timeline, which will increase the layers that show up at a time in your timeline, so you can do a better job at aligning the animations to each other.
Tip: It is a great way to organize your layers if you order them the same way as the layer animations happen on them, if that is possible then that order defines the z-indexes of your layers. For example, your first layer can be one where the layer animation starts at 0MS and the second can be a layer where it starts at 200MS.
Animation running order
By default, the animations run based on a strict order. The first animations to run are the in animations (layer and split text simultaneously), because of this, it can happen that the split text animations seem not to work when layer animations are used, too, as by default both animations start at the same milliseconds. To avoid the conflict, it is worth timing the split text animation to a point when the layer is already in the canvas and it is visible, if both animations are needed.
When the IN animation is finished on the layer, the LOOP animations will start. They’ll continue playing until the slide is changed, or until some event does not trigger the OUT animation.
The out animations are the last animations to be played. The split text and the layer animation play simultaneously, which can also cause similar problems as the IN animations. If the layer animations are not skippable, and there aren’t any events to trigger them, they play right before the slides change. If the layer animations are skippable, and no event triggers the out animations, they won’t be played on a slide change.
Version Overview – PRO
- Layer animations
Core Web Vitals
PageSpeed Insights with Lighthouse analyzed this page on April 12, 2021. For the latest result analyze now!
Related Post: Use Beautiful Layer Animations in Smart Slider 3 Pro