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
エンジニア人生の拡張性を高める 「探索型キャリア設計」の提案
tenshoku_draft
1
120
iOS/Androidで同じUI体験をネ イティブで作成する際に気をつ けたい落とし穴
fumiyasac0921
1
110
【若手エンジニア応援LT会】ソフトウェアを学んできた私がインフラエンジニアを目指した理由
kazushi_ohata
0
150
New Relicを活用したSREの最初のステップ / NRUG OKINAWA VOL.3
isaoshimizu
2
590
誰も全体を知らない ～ ロールの垣根を超えて引き上げる開発生産性 / Boosting Development Productivity Across Roles
kakehashi
1
220
Amplify Gen2 Deep Dive / バックエンドの型をいかにしてフロントエンドへ伝えるか #TSKaigi #TSKaigiKansai #AWSAmplifyJP
tacck
PRO
0
380
適材適所の技術選定 〜GraphQL・REST API・tRPC〜 / Optimal Technology Selection
kakehashi
1
170
SSMRunbook作成の勘所_20241120
koichiotomo
2
130
AGIについてChatGPTに聞いてみた
blueb
0
130
TanStack Routerに移行するのかい しないのかい、どっちなんだい！ / Are you going to migrate to TanStack Router or not? Which one is it?
kaminashi
0
580
rootlessコンテナのすゝめ - 研究室サーバーでもできる安全なコンテナ管理
kitsuya0828
3
380
Terraform CI/CD パイプラインにおける AWS CodeCommit の代替手段
hiyanger
1
240

Featured

See All Featured
The World Runs on Bad Software
bkeepers
PRO
65
11k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
42
9.2k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
47
2.1k
Building Adaptive Systems
keathley
38
2.3k
10 Git Anti Patterns You Should be Aware of
lemiorhan
654
59k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
27
4.3k
Navigating Team Friction
lara
183
14k
Practical Orchestrator
shlominoach
186
10k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
0
89
Designing Dashboards & Data Visualisations in Web Apps
destraynor
229
52k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
27
840
Large-scale JavaScript Application Architecture
addyosmani
510
110k

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