Animating Typography with Webflow interactions

Webflow February 14, 2024
Video Thumbnail
Webflow Logo

Webflow

@webflow

About

Webflow is a Website Experience Platform that empowers modern businesses and marketing teams to visually build, manage, and optimize stunning websites that offer both the consumer experience teams expect, and the enterprise-grade performance and scale they need. With AI-driven personalization and a powerful composable CMS, Webflow helps teams significantly boost conversion rates, translating directly into measurable business growth. Today, over 300,000 of the best companies in the world from The New York Times, Dropbox, Away, Clear, Lattice, Vanta, TED, IDEO, Greenhouse, Checkout.com to Orangetheory Fitness build, manage, and optimize their websites on Webflow.

Video Description

Every website contains text—why not use it to make the site shine? On this livestream, Jonathan Morin, member of the Awwwards Jury since 2020, and thrice nominated for Independent Of The Year, will show how to a site to the next level through text animation using Webflow interactions. Get the cloneable and more: https://wfl.io/live-animating-typography Learn from Jomor: Jo's How to Webflow like a boss course: https://www.awwwards.com/academy/course/how-to-webflow-like-a-boss Flow party's on demand course: https://www.joinflowparty.com/on-demand Timestamps: 0:00 Starting soon 3:40 Introducing Jonathan Morin (winners of many awards) 6:13 Welcome Jomor 7:50 Breakdown of the animations in the nav bar 11:08 Making the logo bigger when nav bar opens 18:30 Animating the nav background image 25:55 Fading in nav links 37:20 Moving the nav links to the right on hover 44:13 Making the wave go up and down continuously 51:20 [Q&A] Why are you so handsome? 51:32 [Q&A] How to create a typewriter effect? 52:30 [Q&A] How do you break down big animations? 54:26 [Q&A] Can you use JSON file for animations? 55:58 Outro