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
57

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
270
The Story of Making Figma Plugins
sonnylazuardi
4
230
UX Prototyping Tools
sonnylazuardi
5
690
Clean Code in Javascript
sonnylazuardi
5
450
React Native for Unified Codebase
sonnylazuardi
0
290
Native Mobile App with Javascript - React Native - Code Push
sonnylazuardi
0
380
Bantu Asap - SS Ceria
sonnylazuardi
0
140
React Native for Mobile App Development
sonnylazuardi
3
490
[Sidang] Layanan Basis Data Real Time NoSQL untuk Kolaborasi Web Audio Editor
sonnylazuardi
0
170

Other Decks in Technology

See All in Technology
複雑な構成要素を持つUIとの向き合い方 〜新・支出グラフでの実例〜 / B43 TECH TALK
nakamuuu
0
130
DevOpsDays History and my DevOps story
kawaguti
PRO
9
2.4k
[新卒向け研修資料] テスト文字列に「うんこ」と入れるな（2024年版）
infiniteloop_inc
0
320
Azure Container Apps + Bicep 〜 こんな感じで運用しています
kaz29
2
420
Oracle Cloud Infrastructure：2024年4月度サービス・アップデート
oracle4engineer
PRO
1
180
Azure犬駆動開発の記録/GlobalAzureFukuoka2024_20240420
nina01
1
190
データベース02: データベースの概念
trycycle
0
140
JAWS-UG Bedrock Claude Night
yamahiro
3
510
EMとして2023年度に頑張ったこと / What we did well in FY2023 as a EM
pauli
1
150
Next'24 事例セッションの紹介とクラウド資格を活用したキャリア形成について語りMuscle
yasumuusan
1
430
SPI原点回帰論：事業課題とFour Keysの結節点を見出す実践的ソフトウェアプロセス改善 / DevOpsDays Tokyo 2024
visional_engineering_and_design
4
1.9k
Compose Compiler Metricsを使った実践的なコードレビュー
tomorrowkey
1
210

Featured

See All Featured
Docker and Python
trallard
33
2.7k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
18
6.9k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
16
1.4k
GraphQLとの向き合い方2022年版
quramy
31
12k
jQuery: Nuts, Bolts and Bling
dougneiner
59
7.1k
Web Components: a chance to create the future
zenorocha
305
41k
Into the Great Unknown - MozCon
thekraken
10
990
Building an army of robots
kneath
300
41k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
226
16k
The Art of Programming - Codeland 2020
erikaheidi
41
12k
Building Adaptive Systems
keathley
30
1.9k
Learning to Love Humans: Emotional Interface Design
aarron
266
39k

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