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
Datadogとともにオブザーバビリティを布教しよう
mego2221
0
130
Datadog APM におけるトレース収集の流れ及び Retention Filters のはなし / datadog-apm-trace-retention-filters
k6s4i53rx
0
320
地方拠点で エンジニアリングマネージャーってできるの？ 〜地方という制約を楽しむオーナーシップとコミュニティ作り〜
1coin
1
130
30分でわかる『アジャイルデータモデリング』
hanon52_
9
2.2k
データ資産をシームレスに伝達するためのイベント駆動型アーキテクチャ
kakehashi
PRO
2
230
オブザーバビリティの観点でみるAWS / AWS from observability perspective
ymotongpoo
7
1k
CZII - CryoET Object Identification 参加振り返り・解法共有
tattaka
0
240
開発者が自律的に AWS Security Hub findings に 対応する仕組みと AWS re:Invent 2024 登壇体験談 / Developers autonomously report AWS Security Hub findings Corresponding mechanism and AWS re:Invent 2024 presentation experience
kaminashi
0
190
AndroidXR 開発ツールごとの できることできないこと
donabe3
0
110
自動テストの世界に、この5年間で起きたこと
autifyhq
10
7.1k
生成AIの利活用を加速させるための取り組み「prAIrie-dog」/ Shibuya_AI_1
visional_engineering_and_design
1
140
RSNA2024振り返り
nanachi
0
500

Featured

See All Featured
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
31
2.1k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
114
50k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
8
270
Being A Developer After 40
akosma
89
590k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
Unsuck your backbone
ammeep
669
57k
Bootstrapping a Software Product
garrettdimon
PRO
305
110k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
Optimising Largest Contentful Paint
csswizardry
34
3.1k
The Cost Of JavaScript in 2023
addyosmani
47
7.3k

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