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
37

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
250
C918bcbfa8df32567636c2d125a34fa1?s=48 sonnylazuardi
3
210
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
Eae29f3898341b3daa24eb37249c43f0?s=48 ikeda7010
0
610
00101a1274d1f92977f4e442ef73be86?s=48 ahana
0
130
E163ae0588e154424d78e17672076ef4?s=48 kosugitti
3
460
18749909c147a9ee98f6b112911943cc?s=48 nuko_yokohama
1
200
B49933741d74e122bc1314b2975e9fc9?s=48 mrtc0
2
270
6a87c9bfc71c805c3f5f248b359365d3?s=48 mu2in
0
240
011714704c4a925e542d426d4cdaa4e3?s=48 giginet
3
710
00851927294532e0742c2c174730dff0?s=48 ido_kara_deru
1
110
6dc67d02d6b322ee317cece9b045317d?s=48 kalupas226
2
190
5a9fb3b80c517e51e4e95a27b63c6a67?s=48 takuyatezuka
3
1.9k
Eb6be531bcfaa99714d8d3b48665a5a9?s=48 budougumi0617
2
670
D2f212ce418f3daa29c23914c9b6892b?s=48 kenmaz
2
230

Featured

See All Featured
Fde6c3a50ca518a909ef35c22c0ee0e4?s=48 destraynor
225
48k
6804f1775cb4babfcc3851298566fbce?s=48 tanoku
91
8.9k
282d599b414022eba5096510f675b6e2?s=48 chrislema
231
16k
7fa6101cd43067653cf4ac6c7ca54305?s=48 akmur
255
20k
1519587b1a0febb658c36c94f6272b0d?s=48 roundedbygravity
248
21k
39488f9d172ab92fd352f2cd7b73258d?s=48 mza
82
4.4k
C4de88ea47538e4594750e3861a341c8?s=48 brettharned
96
3.3k
24fc194843a71f10949be18d5a692682?s=48 gr2m
86
11k
433acaea1012b25d97ae66da9b998dad?s=48 malarkey
194
8.9k
61857dafbd287b3027c4dcea9008ad3c?s=48 carmenhchung
43
2k
9cde37f47e4a800ea081ea42de8d749a?s=48 dougneiner
56
5.6k
E4f5d494ebdc9e7cce1aecf3ce3e8bc1?s=48 shpigford
167
19k

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