Dynamic Text And Font With Lottie Animations

preview_player
Показать описание
In this video I share how you can change the text content of your Lottie animations as well as the font via Google fonts!

Link to the codepen:

Link to Lottie format documentation:

Check out SVGenius for animated icons, blog posts and more!

SVGenius:

My AWWWARDS academy course on Lottie:

Lottie-interactive:

Socials:

  1. SVGenius
  2. lottie
  3. lottiefiles
  4. animations
  5. animation
  6. 2danimation
Рекомендации по теме
Dynamic Text And 0:20:34

Dynamic Text And Font With Lottie Animations

Premiere Pro Template: 0:00:23

Premiere Pro Template: Typography Opener - Dynamic Stomp Intro + Free Font Download

Text Typing Animation 0:07:41

Text Typing Animation On Website Using HTML, CSS And JS | Auto Typing Effect on Website

After Effects Tutorial 0:13:41

After Effects Tutorial - Typography Text Animation in After Effects

3 Conceptual Title 0:10:25

3 Conceptual Title Minimalism Techniques in After Effects

dynamic font 0:00:13

dynamic font

Learn about Dynamic 0:11:20

Learn about Dynamic Type in swift | Accessibility Font

FREE TEXT Preset 0:11:26

FREE TEXT Preset Pack 200+ Transitions | Premiere Pro

Creating Kinetic Typography 0:05:18

Creating Kinetic Typography in Canva | Easy Step-by-Step Tutorial

Make your Fonts 0:07:32

Make your Fonts Responsive with Font Clamp - Shrink and Enlarge - Elementor Wordpress Tutorial

How to add 0:05:01

How to add Fluid Responsive Fonts Typography to a Website - Font Clamp Elementor Wordpress Tutorial

Use a CUSTOM 0:07:06

Use a CUSTOM FONT with Power BI Desktop!!!

How to add 0:04:01

How to add dynamic text in spark ar studio - Import custom FONT

Smooth Text Animation 0:06:08

Smooth Text Animation in After Effects - After Effects Tutorial

HTML web design 0:17:27

HTML web design change text font size and color dynamically jquery html web design

1-Minute Photoshop - 0:01:00

1-Minute Photoshop - Wrap Text Around Any Image

SwiftUI 3: Dynamic 0:06:16

SwiftUI 3: Dynamic Font for Accessibility in Text View

Typotheque Dynamic Font 0:02:49

Typotheque Dynamic Font Samples

Dynamic Font Size: 0:01:45

Dynamic Font Size: How to Increase and Decrease Text with JavaScript | Web Development Tutorial

Set Default Font 0:03:53

Set Default Font In Godot 4.0 In Less Than 4 Minutes!

How to change 0:00:19

How to change font size on iPhone? How to make text size bigger on iPhone? #iPhone chips

Godot 4.1 Dynamic 0:08:51

Godot 4.1 Dynamic Font Gradient GD Shader Code. Works with C# and GD-Script version | Unity to Godot

How to use 0:02:53

How to use a Custom Font with Text Mesh Pro in Unity

Dynamic Font Size 0:09:46

Dynamic Font Size CSS with clamp()

Комментарии
Автор

Great tutorial! I am glad you are digging into the bodymovin extension. I am trying to use the Bodymovin plugin more than the LottieFiles AE plugin this year but bodymovin has much more settings that I dont really understand yet. If am not using a Google font but an Apple font do I pick the URL option instead? What is a "font path"? I missed watching your tutorials these last few years I have been absent.

IsionIndustries
Автор

That's great! I started using Lottie in React, do you get any quality problem when you use text generated with Lottie in a HTML project? I mean, does your text get pixelated and become in a bad quality

damyHarbi
Автор

Hello my friend, i have copied your code to my code pan and i had that error: "ReferenceError: Can't find variable: lottie" in the line 6 at the JS

gugaestrada
Автор

When I run an effect that changes the scale of the text on the web, the text shakes. Is there a solution?

mrqeuby