Gold Penguin Logo with Text

Introduction to Element Animations in Breakdance Builder

Want to transform your boring site into a dynamic one that captivates your audience? In this guide, we’ll show you how to apply animations in Breakdance elements.
Updated September 5, 2023
adding element animation in Breakdance
adding element animation in Breakdance

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!

adding element animation in Breakdance

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. 

Breakdance header section

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

Breakdance animation settings

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.

Breakdance scrolling animation

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.

Breakdance scrolling animation

2) Apply Blur Effect When Scrolling 

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

Breakdance grid elements

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

Breakdance blur effect

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.

Breakdance blur effect

d) Save your changes. Preview the effect.

Breakdance blur animation

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.'

Breakdance entrance animation

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

Breakdance fade animation

d) Save and check the effect.

Breakdance fade entrance animation

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.

Breakdance zoomout animation

e) Save, then preview.

Breakdance zoom out effect

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.

Breakdance 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.

Breakdance sticky header

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! 

Want To Learn Even More?
If you enjoyed this article, subscribe to our free monthly newsletter
where we share tips & tricks on how to use tech & AI to grow and optimize your business, career, and life.
Written by Christy Cañete
Christy Cañete is a software engineer who's passionate about front-end web design. Not only can she code, but she writes too! She loves breaking down technical topics into super easy tutorials. If you're looking to learn without the jargon, she's your go-to.
Notify of

Inline Feedbacks
View all comments
Join Our Newsletter!
If you enjoyed this article, subscribe to our newsletter where we share tips & tricks on how to make use of some incredible AI tools that you can use to grow and optimize a business