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
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
500
[Sidang] Layanan Basis Data Real Time NoSQL untuk Kolaborasi Web Audio Editor
sonnylazuardi
0
190

Other Decks in Technology

See All in Technology
AWS re:Invent 2024 recap in 20min / JAWSUG 千葉 2025.1.14
shimy
1
100
Visual StudioとかIDE関連小ネタ話
kosmosebi
1
380
自社 200 記事を元に整理した読みやすいテックブログを書くための Tips 集
masakihirose
2
330
20250116_JAWS_Osaka
takuyay0ne
2
200
商品レコメンドでのexplicit negative feedbackの活用
alpicola
2
370
【NGK2025S】動物園（PINTO_model_zoo）に遊びに行こう
kazuhitotakahashi
0
240
技術に触れたり、顔を出そう
maruto
1
150
いま現場PMのあなたが、 経営と向き合うPMになるために 必要なこと、腹をくくること
hiro93n
9
7.7k
Formal Development of Operating Systems in Rust
riru
1
420
2025年に挑戦したいこと
molmolken
0
160
デジタルアイデンティティ人材育成推進ワーキンググループ 翻訳サブワーキンググループ 活動報告 / 20250114-OIDF-J-EduWG-TranslationSWG
oidfj
0
540
ABWGのRe:Cap!
hm5ug
1
120

Featured

See All Featured
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
Optimising Largest Contentful Paint
csswizardry
33
3k
Product Roadmaps are Hard
iamctodd
PRO
50
11k
Building a Modern Day 
E-commerce SEO Strategy
aleyda
38
7k
The World Runs on Bad Software
bkeepers
PRO
66
11k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
6
500
How to Think Like a Performance Engineer
csswizardry
22
1.3k
Build The Right Thing And Hit Your Dates
maggiecrowley
33
2.5k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
3
180
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.6k
Building Flexible Design Systems
yeseniaperezcruz
328
38k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
27
1.5k

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