Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Making Interactive Web using Framer Motion

Avatar for Sonny Lazuardi Sonny Lazuardi
June 20, 2020
Technology
0
88

Making Interactive Web using Framer Motion

Jogja JS talk, 20th June 2020

Avatar for Sonny Lazuardi

Sonny Lazuardi

June 20, 2020
Tweet

More Decks by Sonny Lazuardi

See All by Sonny Lazuardi
Artificial Intelligence & Design Plugin
Avatar for Sonny Lazuardi sonnylazuardi
0
310
The Story of Making Figma Plugins
Avatar for Sonny Lazuardi sonnylazuardi
4
260
UX Prototyping Tools
Avatar for Sonny Lazuardi sonnylazuardi
5
790
Clean Code in Javascript
Avatar for Sonny Lazuardi sonnylazuardi
5
510
React Native for Unified Codebase
Avatar for Sonny Lazuardi sonnylazuardi
0
320
Native Mobile App with Javascript - React Native - Code Push
Avatar for Sonny Lazuardi sonnylazuardi
0
400
Bantu Asap - SS Ceria
Avatar for Sonny Lazuardi sonnylazuardi
0
170
React Native for Mobile App Development
Avatar for Sonny Lazuardi sonnylazuardi
3
530
[Sidang] Layanan Basis Data Real Time NoSQL untuk Kolaborasi Web Audio Editor
Avatar for Sonny Lazuardi sonnylazuardi
0
220

Other Decks in Technology

See All in Technology
夢の無限スパゲッティ製造機 #phperkaigi
Avatar for hideki kinjyo o0h
PRO
0
160
ソフトバンク流！プラットフォームエンジニアリング実現へのアプローチ
Avatar for SoftBank Tech Night sbtechnight
1
200
スケールアップ企業でQA組織が機能し続けるための組織設計と仕組み〜ボトムアップとトップダウンを両輪としたアプローチ〜

Avatar for tarappo tarappo
1
170
Zero Data Loss Autonomous Recovery Service サービス概要
Avatar for oracle4engineer oracle4engineer
PRO
2
13k
進化するBits AI SREと私と組織
Avatar for 株式会社ヌーラボ nulabinc
PRO
1
250
Laravelで学ぶOAuthとOpenID Connectの基礎と実装
Avatar for Koji Yoshida kyoshidaxx
0
100
モジュラモノリス導入から4年間の総括：アーキテクチャと組織の相互作用について / Architecture and Organizational Interaction
Avatar for Satoshi Kawashima nazonohito51
1
390
Cortex Code CLI と一緒に進めるAgentic Data Engineering
Avatar for あれ __allllllllez__
0
440
品質を経営にどう語るか #jassttokyo / Communicating the Strategic Value of Quality to Executive Leadership
Avatar for kyonmm kyonmm
PRO
2
570
VPCエンドポイント意外とお金かかるなぁ。せや、共有したろ！
Avatar for tommy tommy0124
1
700
コンテキスト・ハーネスエンジニアリングの現在
Avatar for Hirosato Gamo hirosatogamo
PRO
4
500
AWS CDK「読めるけど書けない」を脱却するファーストステップ
Avatar for Makky12 smt7174
3
190

Featured

See All Featured
How to Build an AI Search Optimization Roadmap - Criteria and Steps to Take #SEOIRL
Avatar for Aleyda Solis aleyda
1
2k
Art, The Web, and Tiny UX
Avatar for Lynn Fisher lynnandtonic
304
21k
A Soul's Torment
Avatar for Nat Ma seathinner
5
2.5k
Breaking role norms: Why Content Design is so much more than writing copy - Taylor Woolridge
Avatar for UX Y'all uxyall
0
210
VelocityConf: Rendering Performance Case Studies
Avatar for Addy Osmani addyosmani
333
24k
Rebuilding a faster, lazier Slack
Avatar for samanthasiow samanthasiow
85
9.4k
Neural Spatial Audio Processing for Sound Field Analysis and Control
Avatar for NII S. Koyama's Lab skoyamalab
0
220
A Guide to Academic Writing Using Generative AI - A Workshop
Avatar for Kenji Saito ks91
PRO
0
240
Organizational Design Perspectives: An Ontology of Organizational Design Elements
Avatar for Dr. Kim W Petersen kimpetersen
PRO
1
640
Effective software design: The role of men in debugging patriarchy in IT @ Voxxed Days AMS
Avatar for Kenny Baas-Schwegler baasie
0
260
Sam Torres - BigQuery for SEOs
Avatar for Tech SEO Connect techseoconnect
PRO
0
220
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
Avatar for Dan Newman danielanewman
231
22k

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