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
93
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
410
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
ボーイスカウトルールでメモリやスキルを改善しよう
Avatar for azukiazusa azukiazusa1
1
890
なぜ私たちのSREプラクティスはなかなか機能しないのか 〜システムより先に組織を見る〜 / Why our SRE practices aren't really working
Avatar for VTRyo vtryo
3
3.7k
関数型の考えを TypeScript に持ち込んで、テストしやすい純粋関数を増やす / Pure at the Core, Effects at the Edge: Bringing Functional Thinking into TypeScript
Avatar for 株式会社カミナシ kaminashi
1
110
あなたの『Site』はどこですか？ — xREという考え方
Avatar for miyamu miyamu
0
1.2k
Road to SRE NEXTの今までとこれから
Avatar for Hiroya Onoe hiroyaonoe
0
310
AIレビューはどこまで任せられるのか？自動化と人が背負うレビューの境界
Avatar for SansanTech sansantech
PRO
2
770
公式ドキュメントの歩き方etc
Avatar for あべ coco_se
0
100
知らん間に、回ってる
Avatar for ming ming_ayami
0
540
アカウントが増えてからでは遅い? ~ マルチアカウント統制の勘所 ~
Avatar for KenichiNakamura kenichinakamura
0
230
依頼文化をやめる日 EM視点で語るPlatform EngineeringとInclusive SRE / Discussing Platform Engineering and Inclusive SRE from an EM's Perspective
Avatar for katsukamaru shin1988
4
5.3k
Making sense of Google’s agentic dev tools
Avatar for Guillaume Laforge glaforge
1
200
AI時代のエンジニアキャリアについて今一度考える
Avatar for Sakamoto sakamoto_582
2
1.5k

Featured

See All Featured
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
Avatar for r-kagaya rkaga
62
44k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
Avatar for panda_program panda_program
123
22k
Deep Space Network (abreviated)
Avatar for Tony Rice tonyrice
0
220
Mozcon NYC 2025: Stop Losing SEO Traffic
Avatar for Sam Torres samtorres
1
310
Six Lessons from altMBA
Avatar for Skipper Chong Warson skipperchong
29
4.3k
Mobile First: as difficult as doing things right
Avatar for Swwweet swwweet
225
10k
A Tale of Four Properties
Avatar for Chris Coyier chriscoyier
163
24k
Optimizing for Happiness
Avatar for Tom Preston-Werner mojombo
378
71k
<Decoding/> the Language of Devs - We Love SEO 2024
Avatar for Nikki Halliwell nikkihalliwell
1
270
Embracing the Ebb and Flow
Avatar for Simon Collison colly
88
5.1k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
Avatar for Chris Coyier chriscoyier
508
140k
HTML-Aware ERB: The Path to Reactive Rendering @ RubyCon 2026, Rimini, Italy
Avatar for Marco Roth marcoroth
2
320

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