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

Making Interactive Web using Framer Motion

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for Sonny Lazuardi Sonny Lazuardi
June 20, 2020
Technology
0
86

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
310
The Story of Making Figma Plugins
Avatar for Sonny Lazuardi sonnylazuardi
4
260
UX Prototyping Tools
Avatar for Sonny Lazuardi sonnylazuardi
5
780
Clean Code in Javascript
Avatar for Sonny Lazuardi sonnylazuardi
5
510
React Native for Unified Codebase
Avatar for Sonny Lazuardi sonnylazuardi
0
320
Native Mobile App with Javascript - React Native - Code Push
Avatar for Sonny Lazuardi sonnylazuardi
0
400
Bantu Asap - SS Ceria
Avatar for Sonny Lazuardi sonnylazuardi
0
160
React Native for Mobile App Development
Avatar for Sonny Lazuardi sonnylazuardi
3
530
[Sidang] Layanan Basis Data Real Time NoSQL untuk Kolaborasi Web Audio Editor
Avatar for Sonny Lazuardi sonnylazuardi
0
220

Other Decks in Technology

See All in Technology
インシデント対応入門
Avatar for gr1m0h grimoh
7
5.5k
Databricksアシスタントが自分で考えて動く時代に! エージェントモード体験もくもく会
Avatar for Takaaki Yayoi taka_aki
0
210
[続・営業向け 誰でも話せるOCI セールストーク] AWSよりOCIの優位性が分からない編(2026年2月20日開催)
Avatar for oracle4engineer oracle4engineer
PRO
0
140
Master Dataグループ紹介資料
Avatar for Sansan, Inc. sansan33
PRO
1
4.4k
社内ワークショップで終わらせない 業務改善AIエージェント開発
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
1
400
AIで 浮いた時間で 何をする？ 2026春 #devsumi
Avatar for konifar konifar
16
3.5k
Snowflake Night #2 LT
Avatar for タロウ taromatsui_cccmkhd
0
270
技術キャッチアップ効率化を実現する記事推薦システムの構築
Avatar for Yudai Hayashi yudai00
2
160
研究開発部メンバーの働き⽅ / Sansan R&D Profile
Avatar for Sansan, Inc. sansan33
PRO
4
22k
オンプレとGoogle Cloudを安全に繋ぐための、セキュア通信の勘所
Avatar for Yuta Ozaki waiwai2111
3
1k
なぜAIは組織を速くしないのか 令和の腑分け
Avatar for su8 / denchu sugino
80
50k
Introduction to Sansan, inc / Sansan Global Development Center, Inc.
Avatar for Sansan, Inc. sansan33
PRO
0
3k

Featured

See All Featured
SEO for Brand Visibility & Recognition
Avatar for Aleyda Solis aleyda
0
4.3k
Designing Powerful Visuals for Engaging Learning
Avatar for Mike Taylor tmiket
0
250
[RailsConf 2023] Rails as a piece of cake
Avatar for Vladimir Dementyev palkan
59
6.3k
Data-driven link building: lessons from a $708K investment (BrightonSEO talk)
Avatar for Szymon szymonslowik
1
940
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
Avatar for Tammy Everts tammyeverts
11
850
A better future with KSS
Avatar for Kyle Neath kneath
240
18k
Lessons Learnt from Crawling 1000+ Websites
Avatar for Charles Meaden charlesmeaden
PRO
1
1.1k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
38
2.8k
Bridging the Design Gap: How Collaborative Modelling removes blockers to flow between stakeholders and teams @FastFlow conf
Avatar for Kenny Baas-Schwegler baasie
0
470
BBQ
Avatar for Matthew Crist matthewcrist
89
10k
Self-Hosted WebAssembly Runtime for Runtime-Neutral Checkpoint/Restore in Edge–Cloud Continuum
Avatar for Yuki Nakata chikuwait chikuwait
0
380
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
183
10k

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