Create Animated Rotate/Flip Heading in Breakdance

If you're looking to add a cool animated rotating menu in Breakdance, it will only take a few clicks. Breakdance has native support for animated rotation, so all you have to do is add a few setting tweaks to your element and you're good to go!

In this tutorial, we'll show you how to create a rotating heading animation in Breakdance Builder. Here's what it looks like:

Creating the effect in Breakdance is fairly straightforward, you can add an Animated Header element, change the animation type to typing, then customize the colors and settings. We put our Animated Header in a section and customized both of them. If you want to use the exact settings we used to make the above gif, here's what we did:

Section Settings: Center Aligned (vertically & horizontally). Set the height to custom with VH of 100 (this will take up the users whole screen)

Animated Header Settings: Rotating effect with #FFE774FF color, 400 cursor weight with color #ECD336FF, font size of 4 REM. The effect was set to "zoom out"

Additionally, we added some custom CSS to rotate the styling a bit. This adds more of an emphasizing kind of effect to users. In Advanced -> Custom CSS (of the header) apply this style:

%%SELECTOR%% {
	transform: rotate(5deg);
}

Conclusion

And that's it! Adding a bit of design to your sites can really help them stand out. These animations are lightweight & easy to set up. If you want to learn more about how to use Breakdance, feel free to check out our other tutorials. As always, please let us know if you have any questions or suggestions in the comments below! Thanks for reading!