Now, without any further ado, let’s jump into the world of animations in Smart Slider 3.

📚 Table of contents

🎓 Getting Started with Smart Slider 3
⚙️ Understanding Slide Animations
⚡ Dynamic Text Effects: How to Animate Text
🔎 Bringing Depth with Zoom Effect
🌊 Making Waves: Using Wave Animation
💻 Storytelling with Timeline Animations
🎨 Customization
✏️ Best Practices for Animation Usage
💡 Conclusion

Getting Started with Smart Slider 3

Okay, let’s get things going by introducing you to the amazing world of Smart Slider 3. You can install the plugin now if you haven’t yet done it on your WordPress website. You’ll be stunned by its user-friendly interface and cool features, I promise.

Making your first slider is simple once Smart Slider 3 is up and running. Just follow these easy steps:

1. Making a New Slider:

• Go to your WordPress dashboard and select “Smart Slider 3” from the menu on the left.
• Select the “New Project” button, and voilá a new slider was born.

2. Selecting a Template (Optional):

• Smart Slider has got you covered even if you are not a design guru, so don’t worry. To spark your imagination, you might choose a pre-made template.
• There’s a huge selection of eye-catching templates to pick from, and they can all be customized to match the feel of your website.

3. Adding Slides and Content:

• Now comes the more enjoyable part. Slides should be added to your slider and it should be filled with interesting text, eye-catching images, and anything else you want to highlight.
• You are not restricted to a single layout with Smart Slider 3. Allow your creativity to soar!

4. Customize Your Slider:

• To customize the behavior and appearance of your slider, take a look at the slider settings. You can change the slider transition, the autoplay, the navigation, and much more.
• Pay attention to the responsive settings to make sure your slider looks good on desktop and mobile devices.

Now that you are familiar with the basics of setting up your slider, let’s get into the world of animations and effects that will make your slider stand out. Let’s get started!

Understanding Slide Animations

Alright, here’s where the real magic begins! Slide animations are like the secret ingredient that adds that wow factor to your sliders. These transitions between slides can be subtle and smooth or bold and eye-catching, depending on the vibe you want to create.

How to Apply Slide Animations

1. Select Your Slide:

• Open up your Smart Slider 3 editor and choose the slide you want to add animations to. Remember, each slide can have its own unique animation.

2. Explore Animation Options:

• Once you’ve selected the slide, head to the “Animations” tab in the slide settings. Here, you’ll find a treasure trove of animation effects waiting for you.

3. Pick Your Animation:

• From classic fade-ins to dynamic move-ins and captivating zoom effects, Smart Slider 3 offers an impressive range of animations to choose from.
• Go ahead and experiment with different animations to see which one complements your content and brand the best.

Top Tip: Less is often more when it comes to slide animations. Subtle and elegant transitions can have a more significant impact on your audience than an overload of flashy effects. Keep your focus on enhancing the content and user experience.

Example Animations

Not sure which animation to go with? Let’s explore a couple of scenarios where specific animations shine:

• Fade-In:  Ideal for a clean and professional look, the fade-in animation smoothly transitions between slides without stealing the show. It’s perfect for minimalistic designs and when you want to keep the focus on your content.
• Move from Left or Right: Want to make a bold statement? The move-in effect from either side can add that extra punch to your slider. Use it to introduce new sections or showcase striking visuals.
• Zoom Effect: Ah, the beloved zoom effect! If you have stunning images or products to flaunt, this animation can make them pop on the screen. Your audience won’t be able to take their eyes off your slider.

 

Remember, Smart Slider 3 gives you the flexibility to set the animation speed and even add delays if you want to create a well-choreographed presentation.

Now it’s time to let your creativity run wild and make your slides come alive with animations that leave your visitors wanting more.

Dynamic Text Effects: How to Animate Text

Okay, now we’ve got the hang of slide animations, but let’s take it to the next level! Your text elements are your slider’s storytellers. In addition, they add a whole new level of interactivity and engagement.

Ready? Let’s get started and see how we can animate text and engage your audience!

How to Animate Text

1. Add Your Text Element:

• To animate text, start by adding the text that you want to animate using either the Heading layer or the Animated Heading Layer. This could be a headline or any text you want to emphasize.

2. Add Text Animation:

• Once you’ve added your Heading Layer, navigate to the “Text Animation” sections of your layer’s Content settings. Here you’ll find a variety of text animation options to choose from.

3. Explore Styles:

• Check out Smart Slider 3’s selection they offer you to animate your text in different styles.
• On each heading, you can set both an Incoming and Outgoing animation. Whatever you are looking for you’ll be spoiled for choice.
• In addition, you can change other aspects of the animation to fine-tune it to your unique preferences.

4. Animated Heading Layer:

• On the other hand, you can also go for the Animated Heading Layer, which is perfect if you want to change a specific part of the text to another one from a list. However, this effect only works if you have at least two lines of text in the Animated Text field.

 

Pro Tip: Ensure that the way you animate your text matches your brand’s personality and your website’s theme. It’s important to stay consistent to create a polished and professional look.

When Should You Animate Text?

There are many ways to animate your text and add value to your content. Let’s look at some cases.

1. Catchy Headlines:

• • For your headline, you can use the Typewriter effect to reveal your headline letter by letter. This will create anticipation and intrigue in your visitors’ minds.
  • Play around with different text animations for your Headings, they can add a nice touch to your content, in a subtle way.

Live Preview

2. Portfolio:

• • However, there are other ways it can be used to create interest, like sharing information about yourself. Adding a slow and elegant animation is the best way to make your portfolio impressive.

Live Preview

3. Quotes:

• If you have great quotes and testimonials that you want people to read, you can choose from all the different incoming animations Smart Slider 3 offers, to focus on those impactful words.

Don’t overdo it: While text animations are a great way to grab the reader’s attention, don’t go overboard. Stick to what’s important and use animations to highlight those elements. Remember, a tiny bit of animation can make a difference in keeping your audience interested. Let your text speak for itself.

You are now in control of how your text looks and feels, so let’s create a slider that’s full of dynamic text effects.

Bringing Depth with Zoom Effect

The zoom effect is a great way to add depth and dynamics to your slide. It’s an effect that instantly draws attention to certain parts of the slide. Besides, it makes them look bigger and more alive.

How to Use the Zoom Effect

1. Select the Layer to Zoom:

• To use the zoom effect, select the layer you want to use a zoom effect on. You can use any slide element, such as an image, text, or even a heading.

2. Add a Zoom Effect:

• Once you’ve selected the element you want to add a zoom effect to, go to the layer settings and click on the “Animation” tab. You’ll see a list of options however, we’ll only need the scale animation.
• Under it choose the one that suits your slide. Decide if you want to bring your content closer to your audience or create a subtle downscaling effect. Then, adjust its settings to your preferences. There are many different ways to use this zoom effect in Smart Slider 3.

3. Use the Ken Burn Effect:

• Another way to add a unique zooming effect to your content, specifically to your background images, is to use the popular Ken Burns effect.
• Head to your slider’s Animations settings and under the Background Animation section enable the Ken Burn Effect. It’s extremely simple and elegant.

 

Pro Tip: Strategically use the zoom effect to highlight important content or product details. You can also use it as a soft hover effect to captivate users when they are interacting with your slider.

Creative Ways to Use the Zoom Effect

1. Product Showcase:

• If you are running an e-commerce site, highlight your product images with the zoom effect. Showing off your best offers will make your customers feel more confident in their purchase decision.

2. Interactive Image Gallery:

• Create an interactive image gallery with the zoom effect. When your visitors hover over your images, they will get a much closer look, creating an interactive and immersive experience for your visitors.

3. Elevate Your Background:

• • Move your background a bit, by adding the Ken Burn Effect. This zoom effect is simple and elegant and works on any kind of image.

Live Preview

Zoom effects are a great way to add depth to your slides. However, it’s important that you remember that you don’t want to use too many zoom effects on your slider. Instead, focus on one or two essential elements to zoom in or out on and let them take the spotlight.

Making Waves: Using Wave Animation

Wave animations are the perfect way to add vibrancy to your sliders. So, let’s dive deep into the world of wave animations and learn how to bring your content to life.

How to Use the Wave Animation

1. Add Wave Animation to Your Background:

• You can add it to your background in Smart Slider 3, so think about what slider’s background can benefit from a bit of motion.
• Once you’ve chosen your slider, go to your Slider Settings page and choose the Animations tab. Inside the Background Animations section, you are provided with two different options to add a wave animation to your slider’s background. (Morph – Wave, Distortion – Wave) This type of animation will be only noticed when your visitors switch between slides.

Check out these templates to see them in action:

Live Preview

Live Preview

2. Add a Wave Animation as a Divider:

• You can also add a wave animation as a Shape Divider. Just below the Background Animation section, you can spot the Shape Divider option. They are perfect for creating smooth and interesting transitions between the sections of your website.

Live Preview

• What’s even more, is that each shape has its own unique animation, which you can fully customize. In addition, many of them are designed as animated wave-like shapes, and setting them to continuously move creates a simply marvelous result.

Live Preview

3. Wave Animation Settings:

• Plus, Smart Slider 3 lets you customize the wave effect, giving you complete control over the intensity of the wave animation. Keep in mind that the goal is to add a thoughtful touch to your content, not overshadow it.

Live Preview

Live Preview

All in all, adding a wave animation can be a great way to give your sliders a magical touch that will keep your visitors engaged and interested in your content, so let your creativity flow.

Storytelling with Timeline Animations

In Smart Slider 3 each layer animation is shown on a timeline, where you can change its delay and duration. If you click on an animation, it will open the layer window’s animation tab, where you can edit the animation you’ve chosen.

When you press the space key, animations will start up, giving you a preview of what they’ll look like.

Another awesome thing about timeline animations is that you can copy and paste the animation from layer to layer. So if you’ve made a really complex animation, all you have to do is copy it to different layers and you can save yourself time and effort.

Tips on Creating Timeline Animations

• Top Tip: Keep your timeline animation short and to the point. Focus on what matters the most to keep your audience engaged and avoid overloading them with too much information.
• Use timeline animations to create a seamless narrative that grabs your audience’s attention.
• Combine engaging content with smooth animations and you’ll have a mesmerizing storytelling experience that’s unlike anything you’ve seen before.

Use the timeline animations to bring life to your slider and create an unforgettable story.

Customization

Now, that you’ve learned about the different animations and effects, your slider is more interesting than ever before. But don’t worry, we’re not finished yet. In this part, we’ll customize and personalize your designs until they are absolutely perfect. So, let’s get started.

Additional Animation Settings

1. Duration and Delay:

• Change the duration of your animations to control how fast or slow a layer animates, and you can also add delays to create a timed animation sequence.

2. Layer Alignment:

• Ensure the correct positioning of your animated layers with alignment settings. It’s the small details that matter!

3. Mix and Match:

• The fun part starts when you start mixing different animations and effects together. All of the above-mentioned animations and more are here at your disposal to create hypnotic effects that grab your audience’s attention and keep them glued to your content. So don’t be afraid to mix and match!

So now that you mastered the basics of animation, you’re ready to take your website sliders to the next level. Show off your creativity and let your website sliders steal the show.

Best Practices for Animation Usage

You’ve learned how to use Smart Slider 3’s animations and effects with ease. Now, let’s look at some important best practices to make the most of these dynamic tools while keeping your website fresh and professional.

Tips for Using Animations Tastefully

• Keep It Simple: Animations can be a great way to grab your audience’s attention but don’t overload your slider with a ton of effects. Too many effects can be distracting and overwhelming.
• Keep It Inline with Your Brand: Make sure your animations match your brand’s identity and design. Stick to a consistent style and color scheme to reinforce your message and create a unified experience for your audience.

User-Friendly Experience

• Navigation: Make sure your slider’s navigation is easy to understand and use. Give a clear overview of how the slider should be navigated.
• Attention Span: Attract your audience’s attention in the first few seconds. Avoid animations that are too long, as visitors may lose interest and move on.
• Testing: Make sure to test and preview the slider on different devices and browsers to ensure it works properly and looks the way you want it to.

By following these tips, you can make your sliders look amazing and not only let your audience see what you have to offer but also make their experience on your website better. Keep in mind that the key is to find the perfect balance between creativity and usability.

Conclusion

To sum up, your sliders will be full of life and imagination. From slide animation and zoom effect to how to animate text and create wave animation, we’ve even touched upon the captivating timeline animation and more. You’ve come a long way on this animation journey and Smart Slider 3 has been the perfect partner along the way.

Keep in mind that the best way to use animations is to keep them tasteful, relevant, and in line with your brand’s identity. Less is more when it comes to animations, a cohesive and visually appealing slider will leave your visitors with a lasting impression.

Thank you for joining us in this journey of animations and effects! Your commitment to improving the visual appeal of your website and engaging your audience is truly admirable.

The post How to Animate Text & Images Like a Pro appeared first on Smart Slider 3 — WordPress Plugin.

]]> https://smartslider3.com/blog/layer-animation/ Sat, 02 May 2020 11:45:39 +0000 https://smartslider3.com/?post_type=blog&p=17197 Everyone loves fancy transitions on their website. A layer animation helps catch and keep the visitor’s attention for as long as possible. Having smooth, lightweight animations on pages has become a trend as people tend to remember images and moving things easier. When you create your slider, and put your layers on it, everything stands […]

The post Use Beautiful Layer Animations in Smart Slider 3 Pro appeared first on Smart Slider 3 — WordPress Plugin.

]]> Everyone loves fancy transitions on their website. A layer animation helps catch and keep the visitor’s attention for as long as possible. Having smooth, lightweight animations on pages has become a trend as people tend to remember images and moving things easier.

When you create your slider, and put your layers on it, everything stands still in their place. However, wouldn’t it be fancy if the layers moved? In Smart Slider 3 Pro you have the option to use layer animations on your slider. They can come in, loop, go out, repeat, so you can create even complex animations if you want. Read this article and learn everything about layer animations.

Importance of layer animations

Layer animation helps you create really amazing sliders, because the movement catches the visitors’ eye. A small animation on a layer can help the visitor to focus on it, it makes your site modern and makes your website come alive. In addition, because of the movement, the visitors read the text on the animated layer subconsciously.

It is also important to mention that you should be careful with the animations, but don’t take them to the extreme. You should keep the harmony in the slider, make sure that the animations aren’t disturbing. When each layer moves at the same time in a different way, it might backfire. Having to focus on a lot of things can be confusing. When it comes to animations, less can be more.

In Smart Slider 3 Pro you can animate all of your layers, you can create any kind of animation that you have imagined. Also, there are a lot of predefined animations to choose from, if you quickly want to have an animation on your layer. The best thing is that if you are done creating a complicated animation, you can copy it to your other layers as well.

Animation types

In Smart Slider you can choose from a lot of pre-set layer animations. There are basic animations like the fade or move, special animations which were built from more Keyframes, and the newest type is the reveal animation. Reveal animation is an elegant and modern effect which can reveal the layers. It animates a colored box in front of the actual layer, which attracts the eye.

You can set all the animations at the Layer window → Animation tab, just select the layer and set an incoming animation, a loop, or an outgoing animation. Also, there is an option to set an Event, and the animation will be triggered by that event like opening a popup. You can read more about them below.

Animations in Smart Slider 3

In Smart Slider 3 Pro you can’t only add an animation to your layers, you can use text animation too, such as the animated heading or the highlighted heading. Also, there is an option to set a main animation to your slider and use animations on your background. These animations are fancy, and there are a lot of pre-defined types available which you can choose from.

In layer animation

The most popular layer animation is the incoming animation. It introduces the layer so the visitor can see it when they need to. In layer animations usually start right after the background animations have finished, but this can be changed for each slider. This kind of animations were made to introduce the layer, for example, fading it in or moving it in from outside of the canvas.

Create mask for a layer animation

To have an even more splendid effect, you can use the mask to make the layer animation only happen within the layer. When this option is used, the content of the layer will only appear when it reaches the original position of the layer. In other words, only those parts of the layer will be visible which are inside the layer’s original position.

Loop layer animation

The loop animation keeps repeating itself until an out animation takes effect on the layer, or until the slide is changed. Using the Events you can put a loop animation (e.g. a pulsing effect) on your layer when the user hovers over it, and when the cursor is not above the layer anymore the animation will stop.

Out layer animation

In Smart Slider 3 Pro you can use outgoing animations, too. Usually, they play right after the in-animation has finished, but they can be played right before the slide-switching, and they can be triggered by any event. The out-animations are used to hide a layer on the current slide. For example, on the headphone slider the text that appears first is hidden using layer animations.

When you create a complex animation and use events to trigger them, you should use the repeatable option. This function can be also useful if you want to create for example a flashing effect, where layers appear then disappear after each other. Both the in- and out-animations have a repeatable option. And the out animation can be skipped per slider, if you don’t want to wait for every single out-animation to happen when you switch slides.

Create multiple layer animations

In Smart Slider 3 Pro you can build complex animations with using keyframes. You can create as many keyframes as you want, and use it after each other. The basic animations can have multiple keyframes, with different animations in them. For example, you can create an in-animation, the layer can fade in, move left, move right and rotate.

Layer animations work the way that enables you to put as many animations on one layer as you want with Keyframes. Also, we’ve made some predefined chain animations to help you have a fancy animation as fast as possible!

Managing the layer animation on the easy to use timeline

Every layer animation appears on a visual timeline, where the delay and duration can be changed. You can see the three layer animations with different colors. When the animation is clicked, it will open the layer window’s animation tab, and let you edit the selected animation. Pressing the space key will start the animations, so you can see a preview on how they will look.

The timeline has another great feature. It lets you copy and paste animations between different layers. For example, if you created a complex animation, you can quickly have it on different layers. So you don’t need to create the animations all over again, you can save time and effort.

Specify events for layer animations

People sometimes want more from layer animations, for example that the animation happens with an event. With Smart Slider 3 Pro you can handle the animations with events. There are a lot of predefined situations, such as when the visitor clicks or the mouse enters the layer area. These events are perfect for creating simple events, which can be triggered if the user interacts with the slider. For example you can show layers when the user hovers on the slide, and hide them if their mouse leaves the slide area.

With default events you can cover a lot of use cases, but you can create your own custom event as well. Any specific layer animation can be triggered by any number of events, so you can create a popup for example, which can be trigger by clicking on the layer.

It is important to mention that there are no events without layer animation. Using events you can make layers appear and disappear on mouse over, mouse out or mouse click.

Two positions for your layers

In Smart Slider your layers can have Default or Absolute position. Working with Default layers is like using a page builder. Additionally, you can work fast with great responsive behavior. Absolute layers allow free editing, but its much more complex to achieve a good responsive look.

However, Absolute layers can be very useful if you build a complex animation, because these layers let you put a layer above or below the others. For example using Absolute layers you can create a popup, or you can create small moving elements like in the City example.

Final Thoughts

With a nice animation you can cheer up your website and you can raise the visitors’ attention. In Smart Slider 3 Pro you can use layer animations on every slider type, so in WordPress carousels or image sliders as well, and you can achieve what you’ve imagined.

Take your layer animations to the next level with the easy to use animation builder. Create unique and fascinating animations choosing a basic or a reveal animation. Don’t forget: a moving design element will always outperform any static one when it comes to grabbing your users’ attention.

The post Use Beautiful Layer Animations in Smart Slider 3 Pro appeared first on Smart Slider 3 — WordPress Plugin.

]]> https://smartslider3.com/blog/layer-slider/ Thu, 30 Apr 2020 14:30:22 +0000 https://smartslider3.com/?post_type=blog&p=16614 With a nice layer slider you can increase the visual appearance of the website. You might have heard the expression: a picture is worth a thousand words. However this is true, sometimes a picture isn’t enough to tell the whole story, you need text for that. You might wonder what the main difference between a […]

The post Create a Unique Layer Slider with Smart Slider 3 appeared first on Smart Slider 3 — WordPress Plugin.

]]> With a nice layer slider you can increase the visual appearance of the website. You might have heard the expression: a picture is worth a thousand words. However this is true, sometimes a picture isn’t enough to tell the whole story, you need text for that.

You might wonder what the main difference between a layer slider and the common responsive image slider is. Well, the answer is both simple and complex. No single image tells the story the way an image and some words do. Words make your layer slider unique, and being unique is a valid goal when you create your website. In fact, a visitor only remembers the special website encounters. Hence you want your website to be this special encounter.

With Smart Slider 3 you can easily create a layer slider and achieve your goals. You can add as many layers as you want and you can also customize them all without using any code. Would you like to try how simple it is? You won’t lose anything because you can download Smart Slider 3 for free. Give it a chance and create your own layer slider!

What is a Layer Slider?

A Layer Slider is a slideshow which is built up from layers. If you are a designer or have used an image editor, you know a thing or two about layers. The modern image editors use layers which you can design, drag & drop everywhere and customize them. If you create your own website design, each layer will contain a piece of your website.

What is a layer actually?

We can tell that layers are containers which store their content. Each layer has its own type of content you can display using it. This content makes all the difference when it comes to making the slider special. You can add caption, add new button, or even longer text to your slider.

And why are layers useful?

You can change them later without any effects on others and move them if you want. In Smart Slider 3 you can use layers too, which you can fully customize and build your own layer slider.

How to make a Layer Slider in WordPress?

1. Plan your slider
2. Choose a Slider plugin which will fit your needs
3. Put your layers on the slides
4. Check the result
5. Publish your ready Layer Slider

Best Free Layer Slider on the Market

Smart Slider 3 is your best choice of creating a free layer slider. If you look around, or have already searched for a slider plugin, you have probably observed something. If you search for a free layer slider plugin, most of them let you add some images, maybe some text. I have good news for you: with this free layer slider plugin you can choose from more layers such as a heading or button, even you can create a YouTube slider.

Already the free version of Smart Slider 3 has all the features to build a unique and colorful layer slider. You can freely use elements that are frequently available in only premium plugins. Customization won’t cost you anything either, you won’t have the impression of having a basic layer slider.

Saving time for you

What’s more, in Smart Slider 3 you can find a lot of premade layer sliders which you can easily import from the Template Library. There are ready to use templates, correctly and fully set up, you don’t need any major customization. You can insert unlimited images to improve the appearance of your page, replace the content with your own and you are ready to publish it.

Tell your Story using Layers in Smart Slider 3

In Smart Slider 3 you can choose from a lot of different types of layers. Each layer has a design tab which allows you to choose from preset settings, or style your own. You can change every detail of your layer easily.

If you add a textual layer, you can change the font family, color and size. It might be important to direct the visitor to a new page, so it’s possible to add a link to the layer. Furthermore, text layers can have background color and padding. If you add an image layer, change its text or even its title.

Additionally, you can add custom CSS class and write custom CSS codes to any layer. This is especially useful if you are a developer or if you want a really unique look.
You are the one who can tell your story the best, and if you want to tell it right, you express yourself with words. You can add these words to the slider using layers.

The most favored layers to make the slider special

Some people don’t need much more extra content but a nice caption. The easiest way to have a unique caption on your slide is to use the heading layer. You can customize this layer to match the other text on your site. The second most popular layer is the button layer. You may use it to make call to action buttons. People often use the image layer as well. It’s a common usage to upload a social icon and link this image to the social channel.

There are many more layers for you to use in Smart Slider 3, the possibilities to create your own content are endless.

Two Positions to Fit Your Needs

In Smart Slider 3 you can use two positioning modes to place your layers. Default layers work like a page builder, you can easily drag your layers, and lets you build your slides quickly with great responsive behavior. With Default layers you can design your structure by adding rows and columns like in a lot of page builders.

The other positioning mode is the Absolute, it lets you drag your layers anywhere, and you can put a layer above or below to another. Absolute layers are great to create your imagined layouts and it is useful if you want to put many layers on each other.

However, you can use the two positioning modes by mixing them. If you create the main content via Default layers, and decorate it with Absolute layer, then the responsiveness is guaranteed.

How about Responsiveness?

Nowadays it is basic to create a responsive website. So I can say that it is an expectation from a plugin to be responsive. Smart Slider 3 is a fully responsive slider plugin, and these are not just empty words, there are a lot of settings which you can reach the best responsive behavior.

As I have written above, with Default layers your can reach a great responsive behavior by default. Don’t be afraid to use a structure, the font-size modifier, and the other responsive settings which are marked with the device icons. Feel free to hide your layers on different devices if you want your slide not to be crowded.

A Carefully Chosen Layer Animation Makes your Slider Powerful

Everyone loves fancy transitions on their website. They help catch and keep the visitor’s attention for as long as possible. When you first add your slider with your content, everything stands still. Every layer is at the position where you have placed it. With a nice little movement, such as layer animation, you can make it move and it makes your layer slider special.

Managing the layer animation on the easy to use timeline

It’s hard to keep track of the layer animations when you can’t see them properly. Smart Slider 3 Pro version has a built-in timeline, it’s visual and easy to use. You can see the layer animations with different colors, also you can adjust the duration and delay of the animation. Clicking on the animation opens up its editor to quickly adjust it if needed.

The timeline has another great feature, it lets you copy and paste animations between different layers. For example, if you have created a complex animation, you can quickly have it on different layers so you don’t need to create the animations all over again and you can save time.

Final Thought

Creating a layer slider is a good way to make your slider unique. Smart Slider 3 is the best choice to create your slider, it is free, fully responsive and you can use a lot of layers on your slides. Thumbnail slider, video slider or landing pages – these are just a part of what you can achieve with this superb plugin!

The post Create a Unique Layer Slider with Smart Slider 3 appeared first on Smart Slider 3 — WordPress Plugin.

]]> https://smartslider3.com/blog/text-animation/ Thu, 02 Apr 2020 11:30:12 +0000 https://smartslider3.com/?post_type=blog&p=17462 Are you familiar with presentation tools, like Microsoft© PowerPoint? Even if you aren’t, you might have seen some examples of the text animation. Think about a paragraph, which fades, bounces or flies in line by line. The effect looks cool and that’s why web designers have started to use it. But why would you need […]

The post How to Create a Cool Text Animation appeared first on Smart Slider 3 — WordPress Plugin.

]]> Are you familiar with presentation tools, like Microsoft© PowerPoint? Even if you aren’t, you might have seen some examples of the text animation. Think about a paragraph, which fades, bounces or flies in line by line. The effect looks cool and that’s why web designers have started to use it. But why would you need to fade in a long paragraph line by line in your WordPress site? Well, of course to catch your users’ attention, and to amaze them with a text effect.

The human eye reacts to any movement happening in its sight. It doesn’t matter whether you’re paying attention to your surroundings or not. Nowadays there are tricks to make the eye see movements even if they’re not actually happening. That’s called an optical illusion, and it’s a very popular technique in web design. But why would you let your users see your texts moving as an optical illusion? You can create real, fancy text animation to impress them instead.

What is a text animation?

The text animation describes the effect when the text is animated in a special way. Of course, you can easily create such effect using Smart Slider 3 plugin. In Smart Slider 3, the heading and animated heading layers have the ability to animate their text. Many plugins make it possible to animate texts, but that’s usually a layer animation, not a text effect.

What’s the difference? Text animations affect the actual text as lines, words or characters. A layer animation affects the layer as a block.

Need a good WordPress plugin to create text animations for your site? Give Smart Slider 3 a try. Its pro version lets you create a beautiful and modern text effects.

Text animation

The text effect is a special kind of animation you can use in Smart Slider 3. You can add it to any heading layer of your slider. The effect splits the content of the heading layer to lines, words or characters. For this reason, the heading layer can’t support any kind of HTML code, as that couldn’t work with this split.

Text effect options

You can fine-tune this animation using many options. You can decide if you want to animate your text by splitting it into words or characters. The split by chars mode is best when you have short text, 3 words at the most.

It’s also possible to change the order the text appears. For instance, if you animate by chars, you can make them appear from left to right or right to left or even from the center. There’s also an option to rotate or scale the text.

Show or hide text using text effect

You can use text effect to show and hide the text, as if you’d use an in- and an out layer animation. This allows you to create spectacular effects to enhance your slider. The Text animation runs at the same time with the layer animation. As said before, this effect affects the text only. So if you have a heading layer which has a background color you’ll need to use both animations. The Text animation will move the text and the layer animation can move the color.

It’s worth adjusting the Text and layer animations to start at the same time. You might add a text and layer animation to your layer, too. But if they don’t start at the same time, the text animation can finish by the time the layer animation starts. If it’s an in animation, you won’t be able to see the text effect. If it’s an out animation and the layer has a background color, the color stays while the text have faded out.

Animated heading layer

The animated heading layer can create beautiful text effects, too. For instance, you can use this layer to create the ever-popular typewriter effect. This effect makes the text looks like as if it were being typed by a typewriter. The effect looks really nice on any website and also saves you some real estate on the page.

The animated heading layer has many cool settings for you to use. One of the best is being able to loop the animation, so it plays endlessly. The other popular option is being able to enter static texts, which are not affected by the animation.

The post How to Create a Cool Text Animation appeared first on Smart Slider 3 — WordPress Plugin.

]]>