Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

Making Interactive Web using Framer Motion

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

Making Interactive Web using Framer Motion

Jogja JS talk, 20th June 2020

Avatar for Sonny Lazuardi

Sonny Lazuardi

June 20, 2020

More Decks by Sonny Lazuardi

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

Other Decks in Technology

See All in Technology
安心して変更できるWebフロントエンドの作り方
Avatar for Hiroyuki ANAI pirosikick
5
2.7k
Claude Code本って、 読む必要あるの？
Avatar for Oikon oikon48
2
470
新機種発売前に見直そう！端末移行で再ログインが要るアプリ・要らないアプリは何が違うのか 〜シームレスに再開できる設計と実装〜
Avatar for ZOZO Developers zozotech
PRO
0
200
TinyGo 開発サイクルを高速化する：Go で作るエミュレータ入門
Avatar for ZOZO Developers zozotech
PRO
1
740
Issue 駆動でスペシャリストの意図を届ける、AI 実装のアクセシビリティ向上
Avatar for thkt thkt
0
120
LTのテーマ どうきめてる？〜5つの型と私のやり方〜
Avatar for Yuuki Yamashita yama3133
1
110
What the customer really needed
Avatar for Yasunobu Kawaguchi kawaguti
PRO
3
200
Railsのように考える: See through the Master
Avatar for Koji SHIMADA snoozer05
PRO
4
1k
今話題のAI「Jev」って何？ 宇宙最速で学ぶ会
Avatar for みのるん minorun365
PRO
27
15k
LLMに渡さなかった仕事
Avatar for oga_aiichiro nanaism
0
560
株式会社シーエーシー　エンジニア向け会社紹介資料
Avatar for 株式会社シーエーシー cac
0
57k
積み重なった技術負債への挑戦 〜初手としての全社ゴト化〜
Avatar for PERSOL CAREER Dev | techtekt techtekt
PRO
0
1.3k

Featured

See All Featured
Keith and Marios Guide to Fast Websites
Avatar for Keith Pitt keithpitt
413
23k
We Are The Robots
Avatar for Honza Javorek honzajavorek
0
380
Lightning Talk: Beautiful Slides for Beginners
Avatar for Ines Montani inesmontani
PRO
2
690
A Guide to Academic Writing Using Generative AI - A Workshop
Avatar for Kenji Saito ks91
PRO
1
470
Applied NLP in the Age of Generative AI
Avatar for Ines Montani inesmontani
PRO
4
2.5k
How to Build an AI Search Optimization Roadmap - Criteria and Steps to Take #SEOIRL
Avatar for Aleyda Solis aleyda
1
2.2k
Fantastic passwords and where to find them - at NoRuKo
Avatar for Phil Nash philnash
52
3.8k
16th Malabo Montpellier Forum Presentation
Avatar for AKADEMIYA2063 akademiya2063
PRO
0
380
Jess Joyce - The Pitfalls of Following Frameworks
Avatar for Tech SEO Connect techseoconnect
PRO
1
410
The Invisible Side of Design
Avatar for Vitaly Friedman smashingmag
301
52k
Information Architects: The Missing Link in Design Systems
Avatar for Michelle Chin soysaucechin
1
1.1k
Dealing with People You Can't Stand - Big Design 2015
Avatar for Cassini Nazir cassininazir
367
27k

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