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
100
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
330
The Story of Making Figma Plugins
Avatar for Sonny Lazuardi sonnylazuardi
4
270
UX Prototyping Tools
Avatar for Sonny Lazuardi sonnylazuardi
5
800
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
Post AI時代のリファクタリング実践記 / Refactoring in the post AI era
Avatar for 株式会社カミナシ kaminashi
1
200
事業活動を AI Ready にする攻めと守りのデータエンジニアリング / data-engineering-for-ai-ready-business
Avatar for pei0804 pei0804
7
2.7k
今さら理解するウェブフォントver.2026
Avatar for takanorip takanorip
3
690
QA4AI 2026-Oct 生成AI時代の品質保証
Avatar for Takahiro Toku tokuty
1
630
触りたくないデータに、どう触るか AI時代のRBACアクセスガバナンス
Avatar for 株式会社IVRy（社員登壇資料） ivry_presentationmaterials
0
140
AI時代に必要な脅威モデリング― 変化の速度に負けない理解とリスク判断
Avatar for masakane55 masakane55
5
1.3k
契約書画像からの情報抽出に特化した視覚接地モデルを育てる話
Avatar for SansanTech sansantech
PRO
1
180
10年後、Engineering 行為を剥奪されるとして、わたしたちは、どう、何を創ればいいだろうか。 / If Engineering Is Taken Away in 10 Years, How and What Should We Create?
Avatar for 株式会社ビットキー / Bitkey Inc. bitkey
PRO
1
160
転んだ話が背中を預ける理由になる / A_story_about_falling_down_gives_you_a_reason_to_watch_each_other_s_backs.pdf
Avatar for Pauli pauli
3
360
AI時代のPRレビューにどう向き合うか？
Avatar for KairiM kairim0
1
220
Loop Engineering これくらいでいい
Avatar for mikan mikanichinose
0
230
Railsで挑む大量データ永続化 〜600億件を永続化するための設計とボトルネックとの戦い〜
Avatar for Shoichi Ochi occhi
0
200

Featured

See All Featured
The MySQL Ecosystem @ GitHub 2015
Avatar for Sam Lambert samlambert
251
13k
AI Search:
Where Are We & What Can We Do About It?
Avatar for Aleyda Solis aleyda
0
8.1k
brightonSEO & MeasureFest 2025 - Winning Strategies for Black Friday CRO & PPC - Christian Goodrich
Avatar for Christian Goodrich cargoodrich
3
870
Testing 201, or: Great Expectations
Avatar for Joseph Mastey jmmastey
46
8.3k
<Decoding/> the Language of Devs - We Love SEO 2024
Avatar for Nikki Halliwell nikkihalliwell
1
350
Stop Working from a Prison Cell
Avatar for Chris Michel hatefulcrawdad
274
21k
The Language of Interfaces
Avatar for Des Traynor destraynor
162
27k
Applied NLP in the Age of Generative AI
Avatar for Ines Montani inesmontani
PRO
4
2.5k
Digital Projects Gone Horribly Wrong (And the UX Pros Who Still Save the Day) - Dean Schuster
Avatar for UX Y'all uxyall
1
3.4k
Art, The Web, and Tiny UX
Avatar for Lynn Fisher lynnandtonic
304
22k
Lessons Learnt from Crawling 1000+ Websites
Avatar for Charles Meaden charlesmeaden
PRO
1
1.6k
How to audit for AI Accessibility on your Front & Back End
Avatar for davetheseo davetheseo
0
600

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