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

Making Interactive Web using Framer Motion

Avatar for Sonny Lazuardi Sonny Lazuardi
June 20, 2020
Technology
0
74

Making Interactive Web using Framer Motion

Jogja JS talk, 20th June 2020

Avatar for Sonny Lazuardi

Sonny Lazuardi

June 20, 2020
Tweet

More Decks by Sonny Lazuardi

See All by Sonny Lazuardi
Artificial Intelligence & Design Plugin
Avatar for Sonny Lazuardi sonnylazuardi
0
300
The Story of Making Figma Plugins
Avatar for Sonny Lazuardi sonnylazuardi
4
250
UX Prototyping Tools
Avatar for Sonny Lazuardi sonnylazuardi
5
770
Clean Code in Javascript
Avatar for Sonny Lazuardi sonnylazuardi
5
490
React Native for Unified Codebase
Avatar for Sonny Lazuardi sonnylazuardi
0
310
Native Mobile App with Javascript - React Native - Code Push
Avatar for Sonny Lazuardi sonnylazuardi
0
390
Bantu Asap - SS Ceria
Avatar for Sonny Lazuardi sonnylazuardi
0
150
React Native for Mobile App Development
Avatar for Sonny Lazuardi sonnylazuardi
3
520
[Sidang] Layanan Basis Data Real Time NoSQL untuk Kolaborasi Web Audio Editor
Avatar for Sonny Lazuardi sonnylazuardi
0
200

Other Decks in Technology

See All in Technology
IBC 2025 動画技術関連レポート / IBC 2025 Report
Avatar for CyberAgent cyberagentdevelopers
PRO
2
220
ゼロコード計装導入後のカスタム計装でさらに可観測性を高めよう
Avatar for SansanTech sansantech
PRO
1
560
20251027_findyさん_音声エージェントLT
Avatar for Almondoイベント担当 almondo_event
2
500
[re:Inent2025事前勉強会(有志で開催)] re:Inventで見つけた人生をちょっと変えるコツ
Avatar for sh_fk2 sh_fk2
1
1k
GPUをつかってベクトル検索を 扱う手法のお話し ~NVIDIA cuVSとCAGRA~
Avatar for fshuhe fshuhe
0
280
ストレージエンジニアの仕事と、近年の計算機について / 第58回 情報科学若手の会
Avatar for Preferred Networks pfn
PRO
4
910
だいたい分かった気になる 『SREの知識地図』 / introduction-to-sre-knowledge-map-book
Avatar for katsuhisa_ katsuhisa91
PRO
3
1.5k
Open Table Format (OTF) が必要になった背景とその機能 (2025.10.28)
Avatar for Akira Shimosako simosako
2
500
アウトプットから始めるOSSコントリビューション 〜eslint-plugin-vueの場合〜 #vuefes
Avatar for 弁護士ドットコム bengo4com
3
1.9k
20251024_TROCCO／COMETAアップデート紹介といくつかデモもやります！_#p_UG 東京：データ活用が進む組織の作り方
Avatar for D soysoysoyb
0
130
Azure Well-Architected Framework入門
Avatar for tomokusaba tomokusaba
1
150
GTC 2025 : 가속되고 있는 미래
Avatar for Jeongkyu Shin inureyes
PRO
0
110

Featured

See All Featured
ReactJS: Keep Simple. Everything can be a component!
Avatar for Pedro Nauck pedronauck
666
130k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
Avatar for Stéphanie Walter stephaniewalter
285
14k
Bootstrapping a Software Product
Avatar for Garrett Dimon garrettdimon
PRO
307
110k
The Art of Programming - Codeland 2020
Avatar for Erika Heidi erikaheidi
56
14k
The Power of CSS Pseudo Elements
Avatar for Geoffrey Crofte geoffreycrofte
80
6k
Music & Morning Musume
Avatar for Bryan Veloso bryan
46
6.9k
A designer walks into a library…
Avatar for Paul Jervis Heath pauljervisheath
209
24k
XXLCSS - How to scale CSS and keep your sanity
Avatar for Zaharenia Atzitzikaki sugarenia
249
1.3M
Done Done
Avatar for chrislema chrislema
185
16k
How to train your dragon (web standard)
Avatar for Monica Dinculescu notwaldorf
97
6.3k
RailsConf 2023
Avatar for Aaron Patterson tenderlove
30
1.3k
A Modern Web Designer's Workflow
Avatar for Chris Coyier chriscoyier
697
190k

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