This presentation used to give a general walk-through through the basics of using framer-motion, a declarative motion system that combines the simplicity of CSS transitions with the power and flexibility of JavaScript. Through this presentation we'll understand how to use it, see live examples that shows the power of such an API and make our hands dirty by magically putting life in some svgs.

1. MAKE WEB MAGICAL
with framer-motion
By: Abderraouf GATTAL

2. 2
Abderraouf GATTAL
GDG Algiers Co-Organizer | Web front-end developer
Qa’ada GDG 2020

3. WHAT IS framer-motion
A declarative motion system that combines the simplicity of CSS transitions with the power
and flexibility of JavaScript. In other words, an API that provides ready-to-go animations and
gesture controls which makes it easy to create dynamic effects.
Qa’ada GDG 2020 3

4. 4
WHY
Framer-motion
• It’s extremely intuitive, super easy to use, and can be used
with React.
• you can create natural animations based on the properties
being animated.
• It offers more advanced listeners, as well as extends the
basic set of event listeners provided by React.
• It currently has support for hover, tap, pan, and drag gesture
detection which is pretty much to get a great animation.
Qa’ada GDG 2020

5. 5
WHY
Framer-motion
• It provides some special cool properties for SVG animations.
• Works perfectly with all CSS properties.
• The animated state of a component will be rendered on
server-side to prevent flashes of re-styled content after your
JavaScript loads.
• It supports styled-components.
Qa’ada GDG 2020

6. OVERVIEW
 Animations: Making animations is as easy as setting values on the animate prop. Motion
will automatically generate an animation for you, and this can be overridden with the
powerful transition prop.
 Gestures: Motion extends React's event system with powerful gesture recognisers. It
supports hover, tap, pan and drag.
 Variants: Variants can be used to animate entire sub-trees of components with a
single animate prop. Options like when and staggerChildren can be used to declaratively
orchestrate these animations.
6Qa’ada GDG 2020

7. OVERVIEW
 Motion components: motion components are the core of the Motion API. There's
a motion component for every HTML and SVG element. All you have to do, is adding
“motion.” to the component (motion.div, motion.svg, motion.path, …).
 MotionValues: Create declarative, reactive chains of MotionValues that can update as a
result of animations and/or gestures. They are used to track the state and velocity of
animating values, outside of React's render lifecycle.
 Scroll-based animations: Performant scroll-based animations like progress bars or
parallax are super-easy to make with the special viewport scroll MotionValues.
7Qa’ada GDG 2020

8. 8
Quick STart
0
Yarn:
yarn add framer-motion
npm:
npm install framer-motion
Alohomora
1
import { motion } from "framer-
motion"
ACCio framer-
motion
2…
Beat the boggart and let your
imagination rule…
Riddikulus
Qa’ada GDG 2020

9. Let’s check some
examples
9Qa’ada GDG 2020
https://www.framer.com/api/m
otion/examples/

10. Live coding
Let’s do some

11. “Trust that little voice in your
head that says, ‘Wouldn’t it be
interesting if…’; and then do it.”
Duane Michals

12. additional
Resources
API docs https://www.framer.com/api/motion/
Website https://www.framer.com/motion/
examples https://www.framer.com/api/motion/examples/
12Qa’ada GDG 2020

13. Your future starts today, not
tomorrow.

14. ANY QUESTIONS?
THANK YOU!

15. GET IN
TOUCH
With me!
 https://www.raouf.codes/
 E-mail: fa_gattal@esi.dz
 https://twitter.com/gattalraouf