Motion.js

Info

What can be done

Debug

Examples

SVG loading spinner

SVG path drawing timeline

timeline is used to create complex sequences of animations across multiple elements. at is timer option, you can make a step in the animation start earlier like in the example. draw from what I understand is a specific option only applied to SVG tags.

Scroll-triggered animation

PS: inView is powerful!

Animating HTML text

animate can receive a function in the first parameter, it will return the progress of the animation we setup (number), with that we can do the changes we want.

Morph SVG path

flubber library is responsible for mashing the d attribute of the SVG path tag, they will create the adjustments based on the progress we pass into it. The animation with motion is the same as others, the only difference is the usage of flubber as a helper library to animate.

This library is used to smoothly interpolate between 2D shapes, it will guess what is the best method to transition between them. Only used for this

P5

Example with canvas!

P5 is a library used to handle with canvas. p5.setup is the function that will be executed first. startAnimation will be the function executed everytime we click on the canvas, it's responsability is to calculate based on X and Y clicked the intermediate values that will be drawn by p5.draw. x,y let variables are used inside p5.draw to draw to the position clicked. p5.draw is always drawing at 60 FPS. performance is a variable available from P5, its related to the frames of the canvas. @motionone is used to create the hue value used in the circle color.

Page progress bar

Element-based progress bar

Parallax and scroll-snapping

This animation is only related to the H2 tag, the scroll animation was done by scroll-snap, this is a new css property that provide a way to animate the scroll a bit.

header has a 100vh height, so it will take account the whole screen for the scroll animation.

Fade on enter/exit

PS: Maybe the offset is a custom one that take account of the start and end of the image in the scroll by using start and end

Video scrubbing

Video is playing by how much we scroll the page

target will make the scroll count only when the scroll has pass the start of the article tag.

3D camera

Rotate the Porsche using the progress of the scroll

Custom easing function

Comparison with other libraries

Compared with Anime.js and Greensock, Motion uses Web Animations API (WAAPI).

Benefits

Far smaller bundlesize
Hardware accelerated animations
Excellent value interpolation

Limitations

The main limitation of WAAPI is it can only animate CSS styles. So to animate HTML text, JavaScript values or SVG attributes like d we need to write custom animations:

Comparison table