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

Making Interactive Web using Framer Motion

Sonny Lazuardi
June 20, 2020
Technology
0
62

Making Interactive Web using Framer Motion

Jogja JS talk, 20th June 2020

Sonny Lazuardi

June 20, 2020
Tweet

More Decks by Sonny Lazuardi

See All by Sonny Lazuardi
Artificial Intelligence & Design Plugin
sonnylazuardi
0
280
The Story of Making Figma Plugins
sonnylazuardi
4
240
UX Prototyping Tools
sonnylazuardi
5
740
Clean Code in Javascript
sonnylazuardi
5
470
React Native for Unified Codebase
sonnylazuardi
0
300
Native Mobile App with Javascript - React Native - Code Push
sonnylazuardi
0
380
Bantu Asap - SS Ceria
sonnylazuardi
0
150
React Native for Mobile App Development
sonnylazuardi
3
500
[Sidang] Layanan Basis Data Real Time NoSQL untuk Kolaborasi Web Audio Editor
sonnylazuardi
0
190

Other Decks in Technology

See All in Technology
Fanstaの１年を大解剖！ 一人SREはどこまでできるのか！？
syossan27
2
170
How to be an AWS Community Builder | 君もAWS Community Builderになろう！〜2024 冬 CB募集直前対策編?!〜
coosuke
PRO
2
2.8k
KubeCon NA 2024 Recap: How to Move from Ingress to Gateway API with Minimal Hassle
ysakotch
0
210
KubeCon NA 2024 Recap / Running WebAssembly (Wasm) Workloads Side-by-Side with Container Workloads
z63d
1
250
LINE Developersプロダクト(LIFF/LINE Login)におけるフロントエンド開発
lycorptech_jp
PRO
0
120
[Ruby] Develop a Morse Code Learning Gem & Beep from Strings
oguressive
1
170
第3回Snowflake女子会_LT登壇資料（合成データ）_Taro_CCCMK
tarotaro0129
0
200
小学3年生夏休みの自由研究「夏休みに Copilot で遊んでみた」
taichinakamura
0
170
どちらを使う?GitHub or Azure DevOps Ver. 24H2
kkamegawa
0
850
マルチプロダクト開発の現場でAWS Security Hubを1年以上運用して得た教訓
muziyoshiz
3
2.4k
KnowledgeBaseDocuments APIでベクトルインデックス管理を自動化する
iidaxs
1
270
PHPからGoへのマイグレーション for DMMアフィリエイト
yabakokobayashi
1
170

Featured

See All Featured
It's Worth the Effort
3n
183
28k
Scaling GitHub
holman
458
140k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
191
16k
Testing 201, or: Great Expectations
jmmastey
40
7.1k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
665
120k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
GitHub's CSS Performance
jonrohan
1030
460k
Facilitating Awesome Meetings
lara
50
6.1k
Mobile First: as difficult as doing things right
swwweet
222
9k
Designing for Performance
lara
604
68k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
48
2.2k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
28
900

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