Gold Penguin Logo with Text

Create a Typewriter Animation in Breakdance Builder

Typewriter effects are great for adding some subtle yet effective flare to your web presence, in Breakdance they're very easy to add and customize
Updated October 18, 2022

Sometimes you want to add a bit more jazz to your hero pages to make them stand out. What's a better way to do that than with a cool typewriter animation showcasing your services?

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

Add a Typewriter Effect in Breakdance

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: Typing effect with #FFE774FF color, 400 cursor weight with color #ECD336FF, font size of 4 REM

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 just like that... you're done! A beautiful typewriter text cursor effect made in Breakdance – responsive for all device sizes, taking up the entire screen. Typewriter effects are great for adding some subtle yet effective flare to your web presence. Have any questions or comments about this tutorial? Let us know in the comments below! Good luck with your design!

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 Justin Gluska
Justin is the founder of Gold Penguin, a business technology blog that helps people start, grow, and scale their business using AI. The world is changing and he believes it's best to make use of the new technology that is starting to change the world. If it can help you make more money or save you time, he'll write about it!
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