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
290
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
あなたが人生で成功するための5つの普遍的法則 #jawsug #jawsdays2025 / 20250301 HEROZ
yoshidashingo
2
290
JavaにおけるNull非許容性
skrb
2
2.6k
株式会社Awarefy(アウェアファイ)会社説明資料 / Awarefy-Company-Deck
awarefy
3
11k
Goで作って学ぶWebSocket
ryuichi1208
3
2.8k
エンジニアリング価値を黒字化する バリューベース戦略を用いた 技術戦略策定の道のり
kzkmaeda
6
2.7k
AIエージェント入門
minorun365
PRO
31
18k
役員・マネージャー・著者・エンジニアそれぞれの立場から見たAWS認定資格
nrinetcom
PRO
3
6k
Snowflakeの開発・運用コストをApache Icebergで効率化しよう!~機能と活用例のご紹介~
sagara
1
460
Perlの生きのこり - エンジニアがこの先生きのこるためのカンファレンス2025
kfly8
2
270
ExaDB-XSで利用されているExadata Exascaleについて
oracle4engineer
PRO
3
250
IAMポリシーのAllow/Denyについて、改めて理解する
smt7174
2
210
Amazon Q Developerの無料利用枠を使い倒してHello worldを表示させよう!
nrinetcom
PRO
2
120
Featured
See All Featured
Speed Design
sergeychernyshev
27
810
Rebuilding a faster, lazier Slack
samanthasiow
80
8.9k
Reflections from 52 weeks, 52 projects
jeffersonlam
348
20k
We Have a Design System, Now What?
morganepeng
51
7.4k
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.5k
GraphQLとの向き合い方2022年版
quramy
44
14k
Bootstrapping a Software Product
garrettdimon
PRO
306
110k
Git: the NoSQL Database
bkeepers
PRO
427
65k
Thoughts on Productivity
jonyablonski
69
4.5k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
7
640
The Art of Programming - Codeland 2020
erikaheidi
53
13k
Rails Girls Zürich Keynote
gr2m
94
13k
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