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
データの品質が低いと何が困るのか
kzykmyzw
6
1k
ビジネスと現場活動をつなぐソフトウェアエンジニアリング～とあるスタートアッププロダクトの成長記録より～
mizunori
0
210
2.5Dモデルのすべて
yu4u
2
610
データ資産をシームレスに伝達するためのイベント駆動型アーキテクチャ
kakehashi
PRO
2
230
アジャイル開発とスクラム
araihara
0
160
Platform Engineeringは自由のめまい
nwiizo
4
1.9k
CZII - CryoET Object Identification 参加振り返り・解法共有
tattaka
0
240
エンジニアの育成を支える爆速フィードバック文化
sansantech
PRO
3
660
地方拠点で エンジニアリングマネージャーってできるの？ 〜地方という制約を楽しむオーナーシップとコミュニティ作り〜
1coin
1
130
個人開発から公式機能へ: PlaywrightとRailsをつなげた3年の軌跡
yusukeiwaki
10
2.7k
Fintech SREの挑戦 PCI DSS対応をスマートにこなすインフラ戦略/Fintech SRE’s Challenge: Smart Infrastructure Strategies for PCI DSS Compliance
maaaato
0
450
PL900試験から学ぶ Power Platform 基礎知識講座
kumikeyy
0
110

Featured

See All Featured
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
We Have a Design System, Now What?
morganepeng
51
7.4k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.5k
Fireside Chat
paigeccino
34
3.2k
GitHub's CSS Performance
jonrohan
1030
460k
GraphQLの誤解/rethinking-graphql
sonatard
68
10k
Java REST API Framework Comparison - PWX 2021
mraible
28
8.4k
Agile that works and the tools we love
rasmusluckow
328
21k
Speed Design
sergeychernyshev
25
780
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
How to train your dragon (web standard)
notwaldorf
90
5.8k

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