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
740
Clean Code in Javascript
sonnylazuardi
5
470
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
障害対応指揮の意思決定と情報共有における価値観 / Waroom Meetup #2
arthur1
5
480
アジャイルチームがらしさを発揮するための目標づくり / Making the goal and enabling the team
kakehashi
3
130
Engineer Career Talk
lycorp_recruit_jp
0
190
20241120_JAWS_東京_ランチタイムLT#17_AWS認定全冠の先へ
tsumita
2
300
Python(PYNQ)がテーマのAMD主催のFPGAコンテストに参加してきた
iotengineer22
0
500
Evangelismo técnico: ¿qué, cómo y por qué?
trishagee
0
360
Lexical Analysis
shigashiyama
1
150
Exadata Database Service on Dedicated Infrastructure(ExaDB-D) UI スクリーン・キャプチャ集
oracle4engineer
PRO
2
3.2k
Security-JAWS【第35回】勉強会クラウドにおけるマルウェアやコンテンツ改ざんへの対策
4su_para
0
180
Can We Measure Developer Productivity?
ewolff
1
150
Lambda10周年！Lambdaは何をもたらしたか
smt7174
2
110
Platform Engineering for Software Developers and Architects
syntasso
1
520

Featured

See All Featured
How to train your dragon (web standard)
notwaldorf
88
5.7k
Writing Fast Ruby
sferik
627
61k
How STYLIGHT went responsive
nonsquared
95
5.2k
Speed Design
sergeychernyshev
25
620
GraphQLとの向き合い方2022年版
quramy
43
13k
Bootstrapping a Software Product
garrettdimon
PRO
305
110k
Become a Pro
speakerdeck
PRO
25
5k
Into the Great Unknown - MozCon
thekraken
32
1.5k
It's Worth the Effort
3n
183
27k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Building Applications with DynamoDB
mza
90
6.1k
Bash Introduction
62gerente
608
210k

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