The shape divider slider example is a full-width slider with lots of layer animations. The basic idea was to create a portfolio slider, which has the shape divider at its bottom. The white color of the divider matches the background color of the section below the slider. This makes it seem as if the curved shape is a part of the white section below.
How to replace the layers in the background?
In Smart Slider 3 there are 2 editing modes. One of them is the content mode which works like a page builder, and you can achieve a good responsive behaviour. The other editing mode is the canvas, where you can move your layers freely on the canvas, and you can put the layers above or below other layers. You can also mix the editing modes, like in this example.
The animated layers in the background are in canvas mode, and they are below the content layer. Because of that you will need to open the layer list to select these layers. Once you selected a layer, you can move it, delete it or replace it.
Use complex animations
The slider has lots of nice layer animations which can catch the visitors’ attention. The white heading layer creates the most interesting effect, the layers are above the shape dividers, thus the white heading seems to be a part of the divider. The parallax effect is also set for the slide background images, the result is stunning, you can easily achieve it.
The heading layer in the background is built up from 2 keyframes. The first keyframe has 300ms delay, and comes from 300px to their original position. The second keyframe has 200ms delay and it will finish the animation with a back out easing, and the text will go to the bottom.
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
Related Post: 12 Beautiful Full Width Slider Examples