Gold Penguin Official Logo

How to Create Parallax Animations in Breakdance Builder

Parallax effects can help improve the user experience of your site. In this guide, we’ll go through the steps to add this cool feature to your Breakdance page.
Difficulty: Medium. You should know a normal amount about this tool/topic
Time Required: ~20 minutes

Want to add personality and depth to your website?

Then you might want to consider parallax animations.

Although they were first used in video games, these cool effects have recently become a trend in web design. They’re perfect to grab your site visitor’s attention. Plus, they make your pages look more interesting and professional.

Some of the benefits of adding parallax animations are as follows:

  • Increases user engagement and page visits
  • Highlights important content or featured products
  • Directs site visitors to your call-to-action
  • Uses a story-telling approach to promote your business

Breakdance has pre-built blocks that allow you to add parallax animations to your site. Adding them to your page is surprisingly easy to pull off - you don’t need to be tech-savvy. 

In this tutorial, I’m going to show you how to create parallax scrolling in Breakdance.

So, let’s get started with the basics, shall we?

parallax scrolling in Breakdance

What is Parallax Animation?

Parallax scrolling is a popular technique in web design that uses an optical illusion to create a 3D effect. And since they’re very common on websites these days, you’ve probably encountered one.

Designers add parallax animation by setting the background elements at a slower pace than those in the foreground. So when a user scrolls, these subtle movements add a dynamic, layered feel to the page.

Traditionally, you would add CSS, HTML, and JavaScript codes to employ the parallax effects. But web design has evolved a lot. Advanced website builders like Breakdance now make it easier to add them without coding. 

In the next section, I’ll guide you through creating simple pages that showcase different parallax animations. 

Creating Parallax Animations in Breakdance

1) Scale Images On Scroll

Changing the element size on scroll creates an illusion of objects moving. This effect also tells the user which element to focus on. 

Here’s how to do it on Breakdance:

a) Prepare your images. Here, I’ve created two images - one that contains the sky background and the other containing a mountain with a transparent background. 

images to animate in Breakdance

b) Open a Breakdance page template and add your images. 

c) When you add the images to the page, you might notice the gap between them. 

add images in Breakdance

To fix this, set the position of the foreground image (in this case, the mountain image) to absolute. The reason for this is we want the image to have a position relative to its container (which is the section). This makes it easier to overlay the mountain image to the background image.

make images absolute in Breakdance

d) Choose the first image (sky background, in my case). Then, go to the ‘Settings’ tab and click ‘Scrolling Animations.’ Toggle the ‘Enable’ option and choose ‘Scale.’ 

Breakdance scroll animation

On the settings window, you’ll need to set the start, middle, and end values. 

acroll animation settings

For this example, I've opted for the image to decrease in size while scrolling. The start value is 1.2; the Bottom trigger is 11 and Top is 80. I didn’t add values for the ‘middle’ and ‘end.’ 

I found these values to be optimal, but feel free to tweak them as you see fit. I've also integrated a blur effect to shift focus as users scroll.

Tip: To place the image in order, make sure to set their z-index values. 

set the z-index value in Breakdance

z-index is a CSS property that controls the stacking order of overlapping elements on a page. The image with the highest z-index (in our case, the mountain image) will appear in front of the other elements with the lower z-indices.

e) Add other elements as you wish. Here, I’ve added a header and button at the top of the section.

d) Here’s the final look of our page.

parallax scroll in Breakdance

2) Use Vertical Scroll Effect

Vertical scroll is one of the class parallax scrolling that makes elements move up or down at different speeds. 

In this tutorial, I’ve prepared a few images with transparent backgrounds. The reason is I want these images to overlap and simulate a floating effect during the scroll.

images with transparent background

So, let’s do that!

a) Open a blank page in Breakdance. Add a few elements like the headings, images, and icons. Modify the background color for each section and adjust the layout to your liking.

add images in Breakdance

b) For the images that you want to overlap, make sure that they’re set in absolute position.

set image position to absolute

Then, manage the stacking order of the overlapping elements by assigning the appropriate z-index values for each.

set image z-index in Breakdance

c) Experiment with different animations to apply to each element. 

In this tutorial, I’ve added an entrance animation for a smoother transition of the first section elements. 

Breakdance entrance animation

For the headings, I’ve used a ‘Slide Down’ animation effect. Then, I adjusted the duration and delay values.

For the images, I’ve used a ‘Slide Up’ animation and set the duration to 1000 ms. 

Breakdance entrance animation

You might want to achieve different effects on your project. So make sure to experiment with the duration and delay values. Keep in mind that the speed of your transitions can be used to convey different moods. For example, gentle and slow animations represent calmness, while fast transitions bring excitement.

d) In the next section, add the vertical scrolling animations for the overlapping images and the heading.

For the leaves image, the ‘Start’ and ‘End’ values are set at -500 px and 500 px. This makes the leaves move downward as you scroll. Conversely, the apple image has ‘Start’ and ‘End’ values of 300 px and -300 px, causing it to move in the opposite direction.

Breakdance vertical scroll

Again, you can experiment with these values depending on what effects you want to achieve.

For the heading, I used the ‘Opacity’ effect. Here, I’ve set the start and end values to zero, and the middle value to one. This makes the text more focused at the scroll’s midpoint but then fades subtly as we scroll up or down. This ensures the viewer's focus transitions smoothly to the next section.

Breakdance opacity effect

Tip: In Breakdance, the image is, by default, relative to the image itself. When you apply a vertical scrolling effect, this might create strange behaviors (for instance, the animation stops midway as you scroll, or the image is not vertically aligned in the middle when you scroll). 

To fix this, we want the image’s position to be relative to its parent container (in our example, the first column). 

Click the wrapper or container element of the image. Go to Settings > Advanced. Enter an ID name in the appropriate field. Copy the ID to your clipboard.

Breakdance ID element

Select one of the overlapping images. On the same settings tab, click Animations > Scrolling Animation > Advanced. 

Under the ‘Relative To’ section, click ‘Custom.’ Then, paste or enter the ID name of your section on the ‘Custom Selector’ field.

Breakdance custom selector

Do the same for the other overlapping images.

e) Save your settings. Preview your page on the front-end.

Breakdance parallax scroll

3) Use Horizontal Scroll Effect

Similar to the vertical scroll, the horizontal scroll makes the elements move across the page at different speeds as we scroll. But this time, they move from left to right (or vice versa). 

Follow these steps to add the horizontal scroll effect to your elements.

a) Start by adding a section, heading, and any images you wish to animate on your Breakdance page. 

In this example, we’re going to create a simple home page for a luxury watch store. I added three sections, headings, and three watch images.

add elements on Breakdance editor

b) To add a horizontal scrolling animation, go to Settings > Animations > Scrolling Animation. Toggle the ‘Enable’ option and choose ‘Horizontal Position.’

enable Breakdance horizontal scroll

On the settings window, you can enter values for the start, middle, and end. You can also set the trigger position to apply the effects to your images. For example, in the first image, I’ve used the following values.

set horizontal scroll settings

I’ve also added the ‘Opacity’ effect to change the focus of the image. The start and end values are set to zero and the middle to one. This means that the image begins and ends with diminished opacity, becoming fully visible at the scroll's midpoint.

Breakdance opacity effect

I’ve also added the ‘Rotation’ effect for a touch of flair. Starting with a -90° angle, the rotation normalizes to 0° by the midpoint and remains so till the end.

Breakdance rotation effect

Both effects have been applied across the three images. For varied rotation triggers, I've adjusted each image's initial value to achieve a sense of spontaneity.

For the headings, I’ve added the ‘Blur’ effect to ensure smooth transitions and shifts in focus during scrolls.

Breakdance blur effect

As always, don't hesitate to play around with these values to achieve your desired effects.

c) Here’s the final look of the page we’ve just created.

Breakdance parallax scroll

That’s a Wrap!

Parallax scrolling in Breakdance can make your site engaging and memorable. When done right, it allows you to present your content in a more creative and dynamic way. 

But be careful not to overdo it. Too much movement can be dizzying and cause annoyance to some users. When adding animations, make sure to add them with a purpose.

Hopefully, this tutorial will help you create beautiful landing pages. If you want to explore Breakdance’s libraries, make sure to read these articles:

You can share your valuable feedback and suggestions through our comment section below. We’d be happy to hear about your Breakdance experience!

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.
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
Join Our Newsletter!
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.
magnifiercross