Animations

Framer Update: Text Effects

3:53

29K views

Jul 16, 2024

About this lesson

Introducing Text Effects — your message, now in motion. Animate characters, words, lines, and even elements. With a realtime preview, designing unique effects has never been easier. Pick one of our presets, or craft your own effects with properties like Scale, Blur, Offset, and more. Animate your content on Appear, or use the Layer In View or Section In View triggers for even more control. https://www.framer.com/updates/text-effects

🌞 Start for free: https://framer.link/yt

📚 Learn more at: https://framer.link/yt-academy

💎 Join the Community: https://framer.link/yt-community

🎉 Follow on X: https://framer.link/yt-x

0:00yo my name is Benjamin and this is text 0:05[Music]0:10effects so let's have a look at how 0:13these work let's create a sequence of 0:16messages using appear effects and text 0:20effects I'll select this row and I'll 0:22first add a standard appear effect I'll 0:25give it an offset y of 20 pixels and 0:28I'll set the damping to 0:3025 now let's select the text within head 0:35over to the effects panel and select 0:39text this is our brand new text effect 0:43panel on top a preview that we can click 0:46to replay the animation below the 0:48preview we have our effect Triggers on 0:52appear layer in View and section in view 0:55we'll keep it on appear like many 0:58effects in 1:00text effects come with a set of nice 1:03presets showing you different 1:05combinations of properties to create 1:07unique effects for every text layer you 1:11can decide to animate each character 1:14each word each line in a paragraph or 1:19each unique element like a heading 1:22versus a paragraph for our first message 1:25let's animate each line I'll also add a 1:28small delay to let part of the appear 1:31animation play out first then let's 1:35customize the effect here we can find 1:37tune all sorts of properties from skill 1:40to blur and we even get a nice inline 1:44preview as well so we can play with some 1:47properties I'll set blur and offset y to 1:51five pixels each and then we can have a 1:54look at the transition although I think 1:56everything looks okay here then we can 2:00look at the preview again and finally 2:03let's preview the entire page cool so we 2:07have our first message bubble and using 2:10this recipe we can create an entire 2:13sequence for these other messages all I 2:17did was add some delays to the appear 2:19and text effects as well as customize 2:22each individual text effect and all 2:26combined we can use the new text effect 2:30feature to design these animated 2:40sequences now maybe we're designing a 2:43mobile version two where the messages 2:46appear below the fold this means we 2:49can't use the appear trigger and instead 2:53we can try one of the other triggers 2:55I'll first select our row and convert 2:58this appear effect to a scroll animation 3:02by selecting layer in view now we can 3:05select our text layer and do the same 3:08thing for our text effect and I already 3:11went ahead and did this for all other 3:14messages as well setting the trigger to 3:17layer in view instead of appear and just 3:21like that we've created a mobile version 3:24where each message animates into view as 3:27we scroll past it and and that's pretty 3:30much it for this video we're super 3:32excited about text effects and all the 3:35unique animations it unlocks thank you 3:38so much for watching and stay tuned for 3:41more updates coming soon

TeachesText Effects

Watch on YouTube ↗

‹ Framer Update: OpenType

CMS Update: Blockquotes, Heading Links, Image Styles, Field Dividers and more ›