The document is about an animation library called ReactF1 created by Jam3, a digital agency in Toronto. ReactF1 allows for highly orchestrated animations across platforms and uses path finding to transition between states. It aims to provide a consistent API and better separation of concerns compared to other animation tools. The creator believes ReactF1's approach could improve how all React animations work.

1. 325 Adelaide Street W.
Toronto, ON, Canada M5V 1P8
Greetings,
Telephone: (416) 531-5263 Web: jam3.com
Email: info@jam3.com
All original concepts, designs and
copy the exclusive property of Jam3

2. ● Director of Creative Technology at Jam3
● Wrangling animations creating ui for ~10 years
● Dad to two kids and husband to one wife

3. Digital agency in Toronto
Highly experiential work
+ A lot of animation
+ WebGL
+ Experimental
Lots of open source code
Always hiring

4. All original concepts, designs and
copy the exclusive property of Jam3

5. Try out new ways of working
Evaluate React
Evaluate F1

6. Community
Small/Consistent API
Components, components, components

7. redux
react-router
react-transition-group
react-f1

8. ● A UI animation library - For reals. One F1 instance is one piece of UI
● Inspired by the way designers work
● Highly orchestrated animations
● Cross Platform
■ Works in React, basic DOM, Canvas, or really anything
■ ReactF1 uses F1-Dom and F1-Dom uses F1
● It uses path finding
■ Better separation of concerns

9. ● Pickering, Toronto, Mississauga
● Drive from one place to another - this is why it's named F1

13. Design the look/states
Design the animations/transitions
Should produce better path to tooling

26. Consistent API throughout the entire app.
Very very testable via Unit tests.

28. It's react-f1's boss.
Chief component's tell other components what state they should be in.

34. The way that chief works is actually how all React animation's should work.
This is how F1 worked also.
But...

36. Custom parsers
Custom transitions via functions

37. Better documentation
Tooling
+ Unit testing harness
+ Integration with After Effects or Animate
+ Gallery
+ Etc.

38. https://www.npmjs.com/react-f1
https://www.npmjs.com/eases
https://www.npmjs.com/eases-fancy
https://github.com/Jam3/f1-tutorial
https://www.npmjs.com/f1-dom
https://www.npmjs.com/f1
https://www.npmjs.com/budo
https://www.npmjs.com/react-router
https://www.npmjs.com/react-addons-transition-group
http://jam3.github.io/fitc-react-spotlight/
https://www.npmjs.com/~mikkoh
https://twitter.com/MikkoH

39. 325 Adelaide Street W.
Toronto, ON, Canada M5V 1P8
Telephone: (416) 531-5263 Web: jam3.com
Email: info@jam3.com
All original concepts, designs and
copy the exclusive property of Jam3