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
68

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
290
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
200

Other Decks in Technology

See All in Technology
Symfony in 2025: Scaling to 0
fabpot
2
190
Explainable Software Engineering in the Public Sector
avandeursen
0
360
移行できそうでやりきれなかった 10年超えのシステムを葬るための戦略
ryu955
2
400
SpannerとAurora DSQLの同時実行制御の違いに想いを馳せる
masakikato5
0
570
DevinはクラウドエンジニアAIになれるのか!? 実践的なガードレール設計/devin-can-become-a-cloud-engineer-ai-practical-guardrail-design
tomoki10
3
1.3k
「ラベルにとらわれない」エンジニアでいること/Be an engineer beyond labels
kaonavi
0
120
AIエージェントキャッチアップと論文リサーチ
os1ma
6
1.2k
技術的負債を正しく理解し、正しく付き合う #phperkaigi / PHPerKaigi 2025
shogogg
7
1.8k
どっちの API SHOW？SharePoint 開発における SharePoint REST API Microsoft Graph API の違い / Which API show? Differences between Microsoft Graph API and SharePoint REST API
karamem0
0
110
ウェブアクセシビリティとは
lycorptech_jp
PRO
0
260
問題解決に役立つ数理工学
recruitengineers
PRO
7
2.1k
Amazon GuardDuty Malware Protection for Amazon S3を使おう
ryder472
2
100

Featured

See All Featured
Site-Speed That Sticks
csswizardry
4
450
Building Adaptive Systems
keathley
41
2.5k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
25k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
135
33k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.5k
A Modern Web Designer's Workflow
chriscoyier
693
190k
GraphQLの誤解/rethinking-graphql
sonatard
70
10k
We Have a Design System, Now What?
morganepeng
51
7.5k
Reflections from 52 weeks, 52 projects
jeffersonlam
349
20k
Building Flexible Design Systems
yeseniaperezcruz
328
38k

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