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
90
0

Making Interactive Web using Framer Motion

Jogja JS talk, 20th June 2020

Avatar for Sonny Lazuardi

Sonny Lazuardi

June 20, 2020

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
790
Clean Code in Javascript
Avatar for Sonny Lazuardi sonnylazuardi
5
520
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
410
Bantu Asap - SS Ceria
Avatar for Sonny Lazuardi sonnylazuardi
0
170
React Native for Mobile App Development
Avatar for Sonny Lazuardi sonnylazuardi
3
540
[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
論文紹介：Pixal3D (SIGGRAPH 2026)
Avatar for TakatoYoshikawa tenten0727
0
450
O'Reilly Infrastructure & Ops Superstream: Platform Engineering for Developers, Architects & the Rest of Us
Avatar for Syntasso syntasso
0
290
AIのために、AIを使った、Effect-TSからの脱却 〜テストを活用した安全なリファクタリングの進め方〜
Avatar for 株式会社ビットキー / Bitkey Inc. bitkey
PRO
0
120
Oracle AI Database@AWS：サービス概要のご紹介
Avatar for oracle4engineer oracle4engineer
PRO
4
2.6k
クラウドネイティブ DB はいかにして制約を 克服したか？ 〜進化歴史から紐解く、スケーラブルアーキテクチャ設計指針〜
Avatar for hacomono Inc. hacomono
PRO
6
1.1k
障害対応のRunbookは作った、でも本当に動くの？ AWS FIS で EKS の AZ 障害を再現してみた
Avatar for Hiroki Takatsuka tk3fftk
0
110
最新技術を"今は選ばない"という技術選定
Avatar for Tech Leverages leveragestech
PRO
0
240
AI 時代の Platform Engineering
Avatar for Recruit recruitengineers
PRO
1
230
パーソルキャリア IT/テクノロジー職向け 会社紹介資料｜Company Introduction Deck
Avatar for PERSOL CAREER Dev | techtekt techtekt
PRO
0
220
Purview 勉強会報告 Microsoft Purview 入門しようとしてみた
Avatar for masakichi masakichixo
1
450
RedmineをAIで効率的に使う検証
Avatar for Takayuki Yoshioka yoshiokacb
0
150
みんなの考えた最強のデータ基盤アーキテクチャ'26前期〜前夜祭〜ルーキーズ_資料_遠藤な
Avatar for Naoya Endo endonanana
0
460

Featured

See All Featured
Data-driven link building: lessons from a $708K investment (BrightonSEO talk)
Avatar for Szymon Słowik szymonslowik
1
1.1k
Designing Dashboards & Data Visualisations in Web Apps
Avatar for Des Traynor destraynor
231
54k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
Avatar for Irina Nazarova irinanazarova
9
1.3k
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
183
10k
A Tale of Four Properties
Avatar for Chris Coyier chriscoyier
163
24k
End of SEO as We Know It (SMX Advanced Version)
Avatar for Michael King ipullrank
3
4.2k
Color Theory Basics | Prateek | Gurzu
Avatar for Gurzu gurzu
0
310
Money Talks: Using Revenue to Get Sh*t Done
Avatar for Nikki Halliwell nikkihalliwell
0
230
Into the Great Unknown - MozCon
Avatar for Noah Learner thekraken
41
2.5k
AI Search: Implications for SEO and How to Move Forward - #ShenzhenSEOConference
Avatar for Aleyda Solis aleyda
1
1.2k
SERP Conf. Vienna - Web Accessibility: Optimizing for Inclusivity and SEO
Avatar for Sara Fernández Carmona sarafernandez
2
1.4k
Building a Scalable Design System with Sketch
Avatar for Laura Van Doore lauravandoore
463
34k

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