Animations with Framer

animate

animate() from framer-motion X animate() from useAnimate()

When we import animate() from framer-motion, all elements that iteract with it will be under its scope and will share it! So, be aware of side effects like the same animation being triggered for another element other than the one you expect

animate() from useAnimate() will be scoped to the component/hook where you've instantiated useAnimate(). It won't interfere with other elements

SVG / Path

animate() bugs

1

When animating an SVG path, the animate() function will not animate the pathLengh. It will change its value abruptly.

1await animate("path", { pathLength: 0.5 }, { duration: 1 });

Solution

We need to add an initial value:

Transform

Framer Motion can animate transform props, but will clash with CSS transform rules applied to the element you're animating.

Let's say you're centralizing an element with transform: translate(-50%, -50%). If you animate the x property, it will work, but when the animations ends, Framer will apply transform: none as inline style therefore overriding the transform: translate(-50%, -50%) appplied via any CSS Selector

Solution

Remove the styles you've applied via CSS and apply them via Framer Motion.

Animating Calculated values

We can use CSS calc() inside a string:

Orchestration Bugs

StaggerChildren Bugs

Animating SVGs

Setting SVG attributes x Changing CSS classes

It' nice to keep in mind to not mix SVG attributes that will be animated with CSS classes that will be animated. This can lead to unexpected behavior.

Example

We have an SVG that will be animated on hover. We'll change its fill. We need to set fill in two places:

1. The default fill as an SVG attribute
2. The new fill that must be animated and appear on hover.

This is how it would get confused:

1. The default fill as an CSS class
2. The new fill that must be animated and appear on hover.

The result of this example is:

1. Framer will animate the fill from green to red.
2. But after the hover ends, it can't find any "fill" property to go back to! It doesnt' know that the CSS class 'fill-green' it's the responsible for applying the fill color.
3. In doubt, it will keep the fill color as red!

Animate children elements when hovering over a parent element

Animating a full screen component via query String

Animating an element to avoid scroll overflow

Commit https://github.com/mariobrusarosco/portfolio/pull/15/commits/4a27f6a52796450db9fbb9ecd29c18f8d60cefef#diff-acc19abade6e78ac892adea5efaf181ab9136b6f88aeb62033ed51aed9ad7b89