Create a Satisfying Wavy Text Animation With Framer Motion

• grapheme-splitter

  4 894 0.0 JavaScript

  A JavaScript library that breaks strings into their individual user-perceived characters.

Do note that if you're using an international language, you might want to check out Grapheme Splitter to divide strings into individual user perceived characters, as opposed to computer perceived characters. Since our text is in English, it'd just add unnecessary complication and an extra step to our project so I'm not adding it in :)

• React

  1,694 221,803 9.9 JavaScript

  The library for web and native user interfaces.

  

In our blog post today, we'll be looking at how we can create a satisfying wavy text animation using Framer Motion, React and TypeScript.

• SurveyJS

  surveyjs.io sponsored

  Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

  

• framer/motion

  43 22,054 9.8 TypeScript

  Open source, production-ready animation and gesture library for React

  

Our animation functionality basically works now... there's just a slight problem. The animation looks terrible. Luckily, we can use Variants in Framer Motion to solve our problem.

• create-react-app

  575 101,853 1.5 JavaScript

  Set up a modern web app by running one command.

  

I know you're eager for action, so let's begin! Start by initialising a React and TypeScript project using create-react-app.

Suggest a related project