Introduction to Element Animations in Breakdance Builder

Website animations help improve the user experience. They provide smooth transitions between elements. They highlight calls-to-action. They help retain your visitor’s attention.

Breakdance offers a suite of animation tools tailored for these purposes.

This guide delves into the three animations available in Breakdance - Scrolling Animation, Entrance Animation, and Sticky.

If you want to make your website less boring and more engaging, read on! We’ll explore how you can use these effects to design a dynamic website that resonates with your target audience!

Pros and Cons of Adding Website Animation

Website animations vary in timing, complexity, and purpose. When added correctly on your web pages, they can offer you several benefits:

• They increase user engagement: Animations are often used to retain the attention of site visitors and make their experience more engaging.
• They help highlight the important parts of your content: For example, subtle animations can help draw attention to call-to-action elements.
• They improve your site’s aesthetic appeal: Animations can help smooth transitions and enhance the visual appeal of your site pages. This can make a lasting impression on users.

Now, before you get excited about adding animations to your web design, remember that they can also break your site when done wrong.  Here are a few cons you need to consider:

• Too much animation can distract users: If you’re like me, you’d probably feel annoyed and leave the website right away. Plus, overcrowded animations can be distracting!
• Poorly done animations can slow loading speeds: Unfortunately, this can hurt your site’s ranking in Google SERPs.

So before adding animations on your Breakdance website, consider mapping out your user interface. Imagine how you want your user’s journey to look like. The goal is to enhance the user experience and not detract from it.

How to Add Element Animations in Breakdance

Breakdance offers three types of element animations. They are:

• Scrolling animation
• Entrance animation
• Sticky

Let’s explore how we can use each of them to enhance our website.

1) Change Element Size As You Scroll

a) Open any page in Breakdance. For this guide, we’re going to add animations to our home page.

b) Click an element you wish to animate. Let’s choose the header section. 

c) Navigate to the left menu and select 'Settings' > 'Animations' > 'Scrolling Animation.' Toggle the 'Enable' switch.

d) Choose an animation effect you want to add. In this case, I’ve picked ‘Scale.’ This adjusts the element size as you scroll. 

For our header, I wanted it to expand initially and then slowly revert to its original size while scrolling. In the ‘Scale’ settings, I’ve set the ‘Start’ value at 1.6.

Of course, you are free to experiment with the other settings. For example, you can drag the trigger between ‘Bottom’ to ‘Top’ to change when the animation effect is going to take place.

e) Explore other settings if you wish, like adjusting the animation trigger from ‘Bottom’ to ‘Top.’

f) Save your changes. Review the result.

2) Apply Blur Effect When Scrolling 

a) Start by selecting the element you wish to blur. Here, I’ve chosen the grid element.

b) Go to 'Settings' > 'Animations' > 'Scrolling Animation' and ensure the 'Enable' switch is on.

c) Choose ‘Blur’ to access its settings. Set when to initiate the blur. I’ve picked a value of 10 for the start of the scroll and adjusted the trigger closer to the bottom, so the image becomes clearer as you scroll down.

d) Save your changes. Preview the effect.

3) Fade-In Entrance Animation On Page Load

a) Using the home page, let's add a fade-in effect to the header section when the page loads. So, click on this element.

b) Head to 'Settings' > 'Animations' > 'Entrance Animation.'

c) Under Animation Type, select ‘Fade.’ A settings window will appear. Here, I set a fade-in duration of 500 ms.

d) Save and check the effect.

4) Zoom-Out Entrance Animation On Page Load

a) This time, we'll make the header section 'zoom-out' when the page loads. Navigate to Settings > Animations > Entrance Animation.

b) Choose ‘Zoom Out’ from the Animation Type options.

c) In the settings window, adjust the duration and delay as needed.

e) Save, then preview.

5) Make the Element Sticky

a) Suppose you want the header section to remain visible while scrolling. Click the header and navigate to Settings > Animations > Sticky.

b) In the settings window, select where you'd like the element to remain. I’ve opted for ‘Top’, so the header remains at the top while scrolling. I’ve also set an offset of 15 px for a small top margin.

c) Save your adjustments and view the result.

What’s Next

We’ve just explored the different animation effects in Breakdance.

If you want more, I would highly recommend you try adding third-party plugins in Breakdance. These add-ons can help extend the functionality of your site and boost your website’s branding.

How have these techniques improved your design? Share your thoughts below!