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
マイグレーションガイドに書いてないRiverpod 3移行話
Avatar for AOKI Taiju taiju59
0
330
Master Dataグループ紹介資料
Avatar for Sansan, Inc. sansan33
PRO
1
4.4k
Introduction to Sansan Meishi Maker Development Engineer
Avatar for Sansan, Inc. sansan33
PRO
0
360
クラウド時代における一時権限取得
Avatar for krrrr38 krrrr38
1
140
三菱UFJ銀行におけるエンタープライズAI駆動開発のリアル / Enterprise AI_Driven Development at MUFG Bank: The Real Story
Avatar for 三菱UFJインフォメーションテクノロジー株式会社 muit
10
20k
Bill One 開発エンジニア 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
5
18k
Data Hubグループ 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
0
2.8k
Snowflakeデータ基盤で挑むAI活用 〜4年間のDataOpsの基礎をもとに〜
Avatar for K.Mitsuhashi kaz3284
1
290
失敗できる意思決定とソフトウェアとの正しい歩き方_-_変化と向き合う選択肢/ Designing for Reversible Decisions
Avatar for soudai sone soudai
PRO
8
1.4k
AIで 浮いた時間で 何をする？ 2026春 #devsumi
Avatar for konifar konifar
16
3.5k
LINEヤフーにおけるAI駆動開発組織のプロデュース施策
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
0
190
What's new in Go 1.26?
Avatar for Koya IWAMURA ciarana
2
260

Featured

See All Featured
The Illustrated Children's Guide to Kubernetes
Avatar for Chris Short chrisshort
51
52k
Un-Boring Meetings
Avatar for Sebastian Deterding codingconduct
0
220
The Hidden Cost of Media on the Web [PixelPalooza 2025]
Avatar for Tammy Everts tammyeverts
2
230
The Power of CSS Pseudo Elements
Avatar for Geoffrey Crofte geoffreycrofte
80
6.2k
The browser strikes back
Avatar for Jono Alderson jonoalderson
0
740
How to Think Like a Performance Engineer
Avatar for Harry Roberts csswizardry
28
2.5k
SEOcharity - Dark patterns in SEO and UX: How to avoid them and build a more ethical web
Avatar for Sara Fernández Carmona sarafernandez
0
130
16th Malabo Montpellier Forum Presentation
Avatar for AKADEMIYA2063 akademiya2063
PRO
0
63
Test your architecture with Archunit
Avatar for Yoan thirion
1
2.2k
What's in a price? How to price your products and services
Avatar for Michael Herold michaelherold
247
13k
A designer walks into a library…
Avatar for Paul Jervis Heath pauljervisheath
210
24k
Measuring & Analyzing Core Web Vitals
Avatar for Philip Tellis bluesmoon
9
760

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