Create Animated Rotate/Flip Heading in Breakdance

Rotating typing effects are great for adding some slick design to your web presence, in Breakdance they're very easy to add and super customizable.
Written by Justin on November 11, 2022 in
Updated: November 11, 2022 | Reading Time: 2 minutes

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:

animated flip heading built in breakdance builder

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!

Join Our Newsletter!
If you enjoyed this article, subscribe to our free monthly newsletter providing you tips & tricks on how to grow your digital business using powerful online tools & AI.
Written by Justin
Justin is the founder of Gold Penguin, a web design and marketing agency that helps businesses increase their revenue using the internet. He writes about the latest software and tools that can help companies 10x their daily workflow & revenue

Comments

Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
Made with 💛 by Gold Penguin © 2022
magnifiercross