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

Making Interactive Web using Framer Motion

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
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
520
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
420
Bantu Asap - SS Ceria
Avatar for Sonny Lazuardi sonnylazuardi
0
180
React Native for Mobile App Development
Avatar for Sonny Lazuardi sonnylazuardi
3
540
[Sidang] Layanan Basis Data Real Time NoSQL untuk Kolaborasi Web Audio Editor
Avatar for Sonny Lazuardi sonnylazuardi
0
230

Other Decks in Technology

See All in Technology
AIがAPIを書く時代に、私たちは何を設計すべきか
Avatar for 草薙昭彦 nagix
0
210
ブラウザ研修 2026
Avatar for Recruit recruitengineers
PRO
3
460
AIエージェントの知識表現と推論に なぜグラフが使われるのか - 記号的AIの復権とニューラルAIとの統合
Avatar for Yohei Onishi yohei1126
1
280
Webアクセシビリティ入門 2026
Avatar for Recruit recruitengineers
PRO
1
270
『三匹の子ぶた』から学ぶネットワークセキュリティの昔と今 / Network Security: Then and Now Through the Lens of The Three Little Pigs
Avatar for NTT docomo Business nttcom
1
1.7k
AI時代の強いチームの作り方
Avatar for yuukiyo yuukiyo
23
15k
認知負荷をGemini で溶かす — GKE 基盤「Orbit」における AI エージェントの実践
Avatar for SansanTech sansantech
PRO
1
250
LLMリーダーボードアップデートに向けたAgentic Math_SWEのトレースについて
Avatar for YuyaYAMAMOTO nejumi
0
210
事業価値と Engineering 2026年度版
Avatar for Recruit recruitengineers
PRO
29
16k
【Google Cloud Next Tokyo'26】Gemini Enterprise と Oracle AI Database で実現する、 業務データ活用を実現する AI エージェント実装
Avatar for KoheiOgawa shisyu_gaku
0
210
【CEDEC2026】『Relink』を拡張せよ - 『GRANBLUE FANTASY: Relink - Endless Ragnarok』の開発速度と品質を守るCI運用
Avatar for Cygames, Inc. cygames
PRO
0
120
侵入は突然に 〜 IoTマルウェアと悪用される家庭の機器 ～ / When Intrusion Strikes: IoT Malware and the Abuse of Home Devices
Avatar for NTT docomo Business nttcom
0
1.5k

Featured

See All Featured
Groundhog Day: Seeking Process in Gaming for Health
Avatar for Sebastian Deterding codingconduct
0
270
Ethics towards AI in product and experience design
Avatar for Skipper Chong Warson skipperchong
2
340
What the history of the web can teach us about the future of AI
Avatar for Ines Montani inesmontani
PRO
1
650
Performance Is Good for Brains [We Love Speed 2024]
Avatar for Tammy Everts tammyeverts
12
1.8k
Applied NLP in the Age of Generative AI
Avatar for Ines Montani inesmontani
PRO
4
2.4k
Dealing with People You Can't Stand - Big Design 2015
Avatar for Cassini Nazir cassininazir
367
27k
How to make the Groovebox
Avatar for あそなす asonas
2
2.3k
First, design no harm
Avatar for Per Axbom axbom
PRO
2
1.2k
Side Projects
Avatar for Sacha Greif sachag
455
43k
Helping Users Find Their Own Way: Creating Modern Search Experiences
Avatar for Dan Newman danielanewman
31
3.3k
Marketing to machines
Avatar for Jono Alderson jonoalderson
1
5.6k
jQuery: Nuts, Bolts and Bling
Avatar for Doug Neiner dougneiner
66
8.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