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

Making Interactive Web using Framer Motion

Sonny Lazuardi
June 20, 2020
Technology
0
62

Making Interactive Web using Framer Motion

Jogja JS talk, 20th June 2020

Sonny Lazuardi

June 20, 2020
Tweet

More Decks by Sonny Lazuardi

See All by Sonny Lazuardi
Artificial Intelligence & Design Plugin
sonnylazuardi
0
280
The Story of Making Figma Plugins
sonnylazuardi
4
240
UX Prototyping Tools
sonnylazuardi
5
750
Clean Code in Javascript
sonnylazuardi
5
480
React Native for Unified Codebase
sonnylazuardi
0
300
Native Mobile App with Javascript - React Native - Code Push
sonnylazuardi
0
380
Bantu Asap - SS Ceria
sonnylazuardi
0
150
React Native for Mobile App Development
sonnylazuardi
3
500
[Sidang] Layanan Basis Data Real Time NoSQL untuk Kolaborasi Web Audio Editor
sonnylazuardi
0
190

Other Decks in Technology

See All in Technology
あなたの人生も変わるかも？AWS認定2つで始まったウソみたいな話
iwamot
3
850
.NET 最新アップデート ～ AI とクラウド時代のアプリモダナイゼーション
chack411
0
200
30分でわかる「リスクから学ぶKubernetesコンテナセキュリティ」/30min-k8s-container-sec
mochizuki875
3
440
Docker Desktop で Docker を始めよう
zembutsu
PRO
0
160
カップ麺の待ち時間(3分)でわかるPartyRockアップデート
ryutakondo
0
140
ゼロからわかる！！AWSの構成図を書いてみようワークショップ 問題&解答解説 #デッカイギ #羽田デッカイギおつ
_mossann_t
0
1.5k
三菱電機で社内コミュニティを立ち上げた話
kurebayashi
1
360
2024年活動報告会（人材育成推進WG・ビジネスサブWG） / 20250114-OIDF-J-EduWG-BizSWG
oidfj
0
220
KMP with Crashlytics
sansantech
PRO
0
240
【Oracle Cloud ウェビナー】2025年のセキュリティ脅威を読み解く：リスクに備えるためのレジリエンスとデータ保護
oracle4engineer
PRO
1
100
Bring Your Own Container: When Containers Turn the Key to EDR Bypass/byoc-avtokyo2024
tkmru
0
850
2024AWSで個人的にアツかったアップデート
nagisa53
1
110

Featured

See All Featured
jQuery: Nuts, Bolts and Bling
dougneiner
62
7.6k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
192
16k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
3
180
KATA
mclloyd
29
14k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
3
240
Designing for Performance
lara
604
68k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
28
2.2k
GraphQLとの向き合い方2022年版
quramy
44
13k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
28
4.5k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.3k

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