Black Friday Super Sale! 🔥 Enjoy a jaw-dropping discount of up to 50% OFF on all Smart Slider plans. Hurry, the offer ends on December 2nd!

Buy Now
News

Introducing Morph and Distortion Animations

Ramona Nemeth-Csoka
Ramona Nemeth-Csoka
October 7, 2021

It’s never easy to create an amazing website that stands out from the crowd. You need eye-catching, user friendly design and some modern effects. The latest update of Smart Slider Pro is here to bring you some cool stuff. This time we’ve brought you two new groups of Background Animations. They’re called Morph and Distortion, and they give you a total of 12 new effects to use on your sliders. Let’s explore these new features together!

What’s a background animation?

Before we check the new effects, first let’s learn what a background animation is. The background animation is the kind of effect that you see when one image changes to another. This happens when you switch slides either by a control (such as an arrow) or using autoplay.

It’s worth noting that some background animations are not noticeable on background colors. It’s due to the way the animations work: they manipulate the background in a way that it’s hard to spot it on a solid color. The new Morph and Distortion animations are great examples of this. So, make sure you use them on images only.

What are Morph animations?

Morph animations magically transit one background image into another in an unconventional way. The transition is mind-blowing but very smooth, so it’s perfectly suitable for any modern websites.

Morph Animations
Noise
Flow
Brush
Wave
Noise
Flow
Brush
Wave
previous arrow
next arrow

What are Distortion animations?

Distortion animations are liquid-like transitions between images. You can create stunning glitch transitions made with WebGL to catch your visitors’ attention. Unlike the Morph animations, they affect the whole image simultaneously. Although they still look super modern, they’re a bit more fun looking.

Distortion Animations
Wave
Triangle
Storm
Flow
Wave
Triangle
Storm
Flow
previous arrow
next arrow

Where to find the new animations?

The new animations are available in 3.5.1 of Smart Slider Pro. To take advantage of them make sure you update first! Once updated, select a slider and go to its Animations tab. Please note that background animations are only available in the Simple slider type.

Real Life Morph and Distortion animation examples

Movie slider template

Every new Smart Slider feature comes with inspiring example sliders. There’s no difference with the Morph and Distortion animations either. To show the strength of the new effects and to inspire you, we’ve created a slider template. This time we’ve chosen a movie theme and we’re using the Distortion – Flow effect on the background images. What’s the result? Check the demo and find out!

Oh, and by the way, we revamped some old templates to use the new effect. Do you need more inspiration to use these new animations? Be sure to check these revamped Morph and Distortion templates, too!

Cosmetics template

One of the sliders we chose was the Cosmetics slider, which uses the Morph – Wave animation when you switch slides.

Organic Food template

The Organic Food template takes advantage of the new Morph – Brush animation to create a stunning slide changing effect.

Photo Story template

The Photo Story template’s most important part is its large and gorgeous images. We choose the Distortion – Storm animation to make the slider more stunning.

Top 5 Products template

We wanted a more subtle animation for the Top 5 Products template, so we chose the Distortion – Mosaic effect. This effect looks absolutely ravishing on this modern full page slider!

Conclusion

The Morph and Distortion animations are amazing additions to Smart Slider. They’re cool and modern effects which will help you create more beautiful sliders than ever. The 4 Morph and 8 Distortion effects let you experiment and find the animation that suits your site the most. Start using the new effects today!

Ramona Nemeth-Csoka

About Author

Hi, I’m Ramona and I’m a member of Nextend‘s awesome support team. You’ve probably chat with me if you’ve submit a support ticket. When I’m not answering support emails I read a book or go cycling. I enjoy writing as well, both for our blog and for my private projects.