Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Making Interactive Web using Framer Motion

C918bcbfa8df32567636c2d125a34fa1?s=47 Sonny Lazuardi
June 20, 2020
Technology
0
31

Making Interactive Web using Framer Motion

Jogja JS talk, 20th June 2020

C918bcbfa8df32567636c2d125a34fa1?s=128

Sonny Lazuardi

June 20, 2020
Tweet

More Decks by Sonny Lazuardi

See All by Sonny Lazuardi
C918bcbfa8df32567636c2d125a34fa1?s=48 sonnylazuardi
0
240
C918bcbfa8df32567636c2d125a34fa1?s=48 sonnylazuardi
3
200
C918bcbfa8df32567636c2d125a34fa1?s=48 sonnylazuardi
5
630
C918bcbfa8df32567636c2d125a34fa1?s=48 sonnylazuardi
4
380
C918bcbfa8df32567636c2d125a34fa1?s=48 sonnylazuardi
0
260
C918bcbfa8df32567636c2d125a34fa1?s=48 sonnylazuardi
0
340
C918bcbfa8df32567636c2d125a34fa1?s=48 sonnylazuardi
0
120
C918bcbfa8df32567636c2d125a34fa1?s=48 sonnylazuardi
3
450
C918bcbfa8df32567636c2d125a34fa1?s=48 sonnylazuardi
0
150

Other Decks in Technology

See All in Technology
7e6a435700dda6cdb22105d601f20892?s=48 picardparis
4
2.7k
9cdd446fb259ec93e52d4388f60197f8?s=48 karamem0
0
740
C4c6c7b4fdf9285bcf12c5caa58c8d53?s=48 nyk510
10
6k
609308e6510e41133d30460eef1ccd36?s=48 no24oka
0
9k
6500a96a5f0786d7ff0c53429d691ae6?s=48 kazuhiro4949
1
220
F89f6a80305746253d4bedb128b2f445?s=48 mats16
0
240
60187fe0ab07ea5a46572a3ab05f61dd?s=48 mattstauffer
0
1.4k
8c90d71079bb191d7374ed651ee14048?s=48 crssnky
0
290
2ce86e6d959967388c454e179c7a7091?s=48 leaner_tech
0
11k
B22a79a9c1bf42c1825ce42dedd41765?s=48 shinpsan
1
360
7bbb6e8cd78042f30a37c29771002d2a?s=48 nenonaninu
0
160
7e20183342a040a32924a41343603286?s=48 konabuta
0
1.1k

Featured

See All Featured
9375a9529679f1b42b567a640d775e7d?s=48 schacon
147
6.7k
1177e050db6bafe62885362edf6e3537?s=48 lauravandoore
12
1.9k
E4f5d494ebdc9e7cce1aecf3ce3e8bc1?s=48 shpigford
371
43k
053e75a5b48b44d6dd0612795dfb326d?s=48 notwaldorf
40
2.5k
20bfe76b3d6105641f879fe45cfc9272?s=48 bkeepers
PRO
409
58k
9cde37f47e4a800ea081ea42de8d749a?s=48 dougneiner
120
8.1k
433acaea1012b25d97ae66da9b998dad?s=48 malarkey
120
16k
E14f55d3f939977cecbf51b64ff6f861?s=48 keithpitt
401
20k
79acae287842acf29084005533a7fb3b?s=48 hursman
108
9.4k
61857dafbd287b3027c4dcea9008ad3c?s=48 carmenhchung
38
1.8k
Ded01cdab114abe4ec13511e4c25b9bb?s=48 andyhume
64
4.1k
91cefdf141106fa10674aae74ce05890?s=48 yeseniaperezcruz
303
32k

Transcript

  1. Framer Motion @sonnylazuardi Making Interactive Web using

  2. Framer Motion

  3. @sonnylazuardi

  4. @sonnylazuardi https://mailbrew.com/mobile/

  5. @sonnylazuardi Design Handoff The design handoff is a point in

    the product development process where developers implement the finished design. In order for a handoff to be successful, a good designer-developer collaboration is vital. https://phase.com/magazine/designer-and-developer-handoff-guide/

  6. @sonnylazuardi

  7. Color Copy Paste

  8. https://colorcopypaste.app

  9. None

  10. Background Story

  11. @sonnylazuardi How to launch a product

  12. @sonnylazuardi Landing Page Trend

  13. Collaboration

  14. Idea Sketch

  15. Figma https://www.figma.com/community/file/848833690265282057/Color-Copy-Paste-Promotional

  16. Development Story

  17. @sonnylazuardi Gatsby Website

  18. @sonnylazuardi Cursor Tracking

  19. @sonnylazuardi Color Palette Interaction https://codesandbox.io/s/framer-motion-drag-to-reorder-b7ys7

  20. Handoff Demo

  21. @sonnylazuardi https://handz.design

  22. @sonnylazuardi https://codesandbox.io/s/framer-motion-handoff-jnqqg?file=/src/App.js

  23. @sonnylazuardi https://www.framer.com/community/

  24. Thank You @sonnylazuardi