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
76

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
500
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
160
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
210

Other Decks in Technology

See All in Technology
個人から巡るAI疲れと組織としてできること - AI疲れをふっとばせ。エンジニアのAI疲れ治療法 ショートセッション -
Avatar for kichion kikuchikakeru
1
310
旧から新へ: 大規模ウェブクローラの Perl から Go への移行 / YAPC::Fukuoka 2025
Avatar for motemen motemen
3
920
明日から真似してOk！NOT A HOTELで実践している入社手続きの自動化
Avatar for kajinari nkajihara
1
760
AIと自動化がもたらす業務効率化の実例： 反社チェック等の調査・業務プロセス自動化
Avatar for enpipi enpipi
0
610
Rubyist入門: The Way to The Timeless Way of Programming
Avatar for Koji SHIMADA snoozer05
PRO
7
500
[mercari GEARS 2025] Keynote
Avatar for mercari mercari
PRO
1
280
Kubernetesと共にふりかえる! エンタープライズシステムのインフラ設計・テストの進め方大全
Avatar for 高棹大樹 daitak
0
250
Flutterで実装する実践的な攻撃対策とセキュリティ向上
Avatar for FujiKinaga fujikinaga
2
430
重厚長大企業で、顧客価値をスケールさせるためのプロダクトづくりとプロダクト開発チームづくりの裏側 / Developers X Summit 2025
Avatar for モンゴル (mongolyy) mongolyy
0
100
Flutterにしてよかった？出前館アプリを2年運用して気づいたことを全部話します
Avatar for 株式会社出前館 demaecan
0
200
[mercari GEARS 2025] Building Foundation for Mercari’s Global Expansion
Avatar for mercari mercari
PRO
1
130
Service Monitoring Platformについて
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
0
160

Featured

See All Featured
Scaling GitHub
Avatar for Zach Holman holman
463
140k
The Cult of Friendly URLs
Avatar for Andy Hume andyhume
79
6.7k
Facilitating Awesome Meetings
Avatar for Lara Hogan lara
57
6.6k
Faster Mobile Websites
Avatar for Dean Hume deanohume
310
31k
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
180
10k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
Avatar for panda_program panda_program
118
20k
Intergalactic Javascript Robots from Outer Space
Avatar for Vicent Martí tanoku
273
27k
The Psychology of Web Performance [Beyond Tellerrand 2023]
Avatar for Tammy Everts tammyeverts
49
3.2k
The Art of Delivering Value - GDevCon NA Keynote
Avatar for David Neal reverentgeek
16
1.8k
Practical Tips for Bootstrapping Information Extraction Pipelines
Avatar for Matthew Honnibal honnibal
24
1.6k
The Success of Rails: Ensuring Growth for the Next 100 Years
Avatar for Eileen M. Uchitelle eileencodes
46
7.8k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
Avatar for Morgane Peng morganepeng
132
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