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
65

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

  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