Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Making Interactive Web using Framer Motion
Search
Sonny Lazuardi
June 20, 2020
Technology
0
65
Making Interactive Web using Framer Motion
Jogja JS talk, 20th June 2020
Sonny Lazuardi
June 20, 2020
Tweet
Share
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
510
[Sidang] Layanan Basis Data Real Time NoSQL untuk Kolaborasi Web Audio Editor
sonnylazuardi
0
190
Other Decks in Technology
See All in Technology
2.5Dモデルのすべて
yu4u
2
610
スタートアップ1人目QAエンジニアが QAチームを立ち上げ、“個”からチーム、 そして“組織”に成長するまで / How to set up QA team at reiwatravel
mii3king
1
1.1k
WAF に頼りすぎない AWS WAF 運用術 meguro sec #1
izzii
0
460
エンジニアの育成を支える爆速フィードバック文化
sansantech
PRO
3
670
Fintech SREの挑戦 PCI DSS対応をスマートにこなすインフラ戦略/Fintech SRE’s Challenge: Smart Infrastructure Strategies for PCI DSS Compliance
maaaato
0
450
技術負債の「予兆検知」と「状況異変」のススメ / Technology Dept
i35_267
1
1k
Larkご案内資料
customercloud
PRO
0
600
君はPostScriptなウィンドウシステム 「NeWS」をご存知か?/sunnews
koyhoge
0
720
「海外登壇」という 選択肢を与えるために 〜Gophers EX
logica0419
0
500
Developers Summit 2025 浅野卓也(13-B-7 LegalOn Technologies)
legalontechnologies
PRO
0
150
リーダブルテストコード 〜メンテナンスしやすい テストコードを作成する方法を考える〜 #DevSumi #DevSumiB / Readable test code
nihonbuson
11
5.8k
転生CISOサバイバル・ガイド / CISO Career Transition Survival Guide
kanny
3
410
Featured
See All Featured
GraphQLとの向き合い方2022年版
quramy
44
13k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
44
9.4k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
232
17k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
27
1.5k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.4k
The Cost Of JavaScript in 2023
addyosmani
47
7.3k
Optimising Largest Contentful Paint
csswizardry
34
3.1k
Designing on Purpose - Digital PM Summit 2013
jponch
117
7.1k
How to train your dragon (web standard)
notwaldorf
90
5.8k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.6k
Code Reviewing Like a Champion
maltzj
521
39k
Transcript
Framer Motion @sonnylazuardi Making Interactive Web using
Framer Motion
@sonnylazuardi
@sonnylazuardi https://mailbrew.com/mobile/
@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/
@sonnylazuardi
Color Copy Paste
https://colorcopypaste.app
None
Background Story
@sonnylazuardi How to launch a product
@sonnylazuardi Landing Page Trend
Collaboration
Idea Sketch
Figma https://www.figma.com/community/file/848833690265282057/Color-Copy-Paste-Promotional
Development Story
@sonnylazuardi Gatsby Website
@sonnylazuardi Cursor Tracking
@sonnylazuardi Color Palette Interaction https://codesandbox.io/s/framer-motion-drag-to-reorder-b7ys7
Handoff Demo
@sonnylazuardi https://handz.design
@sonnylazuardi https://codesandbox.io/s/framer-motion-handoff-jnqqg?file=/src/App.js
@sonnylazuardi https://www.framer.com/community/
Thank You @sonnylazuardi