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
社外コミュニティで学び社内に活かす共に学ぶプロジェクトの実践/backlogworld2024
nishiuma
0
260
サイバー攻撃を想定したセキュリティガイドライン 策定とASM及びCNAPPの活用方法
syoshie
3
1.2k
ブラックフライデーで購入したPixel9で、Gemini Nanoを動かしてみた
marchin1989
1
520
どちらを使う?GitHub or Azure DevOps Ver. 24H2
kkamegawa
0
720
LINE Developersプロダクト(LIFF/LINE Login)におけるフロントエンド開発
lycorptech_jp
PRO
0
120
Qiita埋め込み用スライド
naoki_0531
0
4.7k
祝！Iceberg祭開幕！re:Invent 2024データレイク関連アップデート10分総ざらい
kniino
2
260
Amazon Kendra GenAI Index 登場でどう変わる？ 評価から学ぶ最適なRAG構成
naoki_0531
0
110
OpenAIの蒸留機能(Model Distillation)を使用して運用中のLLMのコストを削減する取り組み
pharma_x_tech
4
550
組織に自動テストを書く文化を根付かせる戦略（2024冬版） / Building Automated Test Culture 2024 Winter Edition
twada
PRO
13
3.7k
レンジャーシステムズ | 会社紹介（採用ピッチ）
rssytems
0
150
ゼロから創る横断SREチーム 挑戦と進化の軌跡
rvirus0817
2
270

Featured

See All Featured
Making Projects Easy
brettharned
116
5.9k
How To Stay Up To Date on Web Technology
chriscoyier
789
250k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
48k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
32
2.7k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
159
15k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.2k
A designer walks into a library…
pauljervisheath
204
24k
Rails Girls Zürich Keynote
gr2m
94
13k

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