How to Create Handwriting Animation using Framer-Motion?

Handwriting animation can add a unique and engaging touch to your web projects. With the help of Framer-Motion, a powerful animation library for React, you can easily create stunning handwriting animations. In this tutorial, we will explore different approaches to achieve this effect.

Approach 1: SVG Path Animation

In this approach, we will use SVG paths to create the handwriting effect. We will define the path for each letter and animate the drawing of these paths using Framer-Motion.

import React from 'react';
import { motion } from 'framer-motion';

const HandwritingAnimation = () => {
  const pathVariants = {
    hidden: { pathLength: 0 },
    visible: { pathLength: 1 }
  };

  return (
    
  );
};

export default HandwritingAnimation;
  

In the above code snippet, we define an SVG path using the “d” attribute. The “pathVariants” object defines the animation variants for the path. The path starts with a length of 0 (hidden) and animates to a length of 1 (visible) over a duration of 2 seconds.

Approach 2: CSS Animation

If you prefer a CSS-based approach, you can achieve the handwriting animation using keyframes and CSS animations.

@keyframes handwriting {
  0% {
    stroke-dashoffset: 1000;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

.handwriting-animation {
  animation: handwriting 2s linear forwards;
}
  

In the above CSS code snippet, we define a keyframe animation called “handwriting” that animates the “stroke-dashoffset” property of the SVG path. The animation starts with a dash offset of 1000 (hidden) and animates to a dash offset of 0 (visible) over a duration of 2 seconds. To apply this animation to an SVG path, add the “handwriting-animation” class to the path element.

Conclusion

Creating handwriting animations using Framer-Motion can add a touch of creativity to your web projects. Whether you prefer the SVG path animation approach or the CSS animation approach, both methods allow you to achieve stunning handwriting effects.

Feel free to experiment with different variations and customize the animations to suit your specific needs. Happy animating!