Funimation with Framer Motion
Exploring the world of Framer motion. Framer Motion (now rebranded as Motion) is a popular, open-source production-ready motion library for React.
Hover Basic
A simple hover animation where motion lets you add a whileHover prop to the element and you get this nicely smooth animation out of the box.
Enter Item
An enter animation item, where you can specify an initial satate opacity of 0 and end state of opacity of 1. you could also animate the x, y, z axis. in motion the default animation transition duration is somewhere between 0.3 to 0.8 if user do not specify the duration
Enter Item (Staggered)
Unlike simple Enter animation above. we can use `Variants` to have a named properties and orchestrate the children animation. we can also add staggered delay for each children like below.
Animate in View
In this section you can utilize the motion component attributes named whileInView and viewport to animate elements when they come into view.
Scroll this component ↓
Did you find this helpful?
Recent Posts
Table of Contents
Did you find this helpful?