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
91
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
170
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
速さだけじゃない！ VoidZero ツールが移行先に選ばれる理由
Avatar for mizdra mizdra
PRO
6
700
ルールやカスタム機能、どう使う？理想の出力を引き出すために今知りたいIBM Bob 5つの機能
Avatar for mu (Mizuho Uehara) muehara
0
150
食べログのサーキットブレーカー導入を振り返って
Avatar for atpons atpons
1
160
「コーディング」しない人のための Claude Code 入門　ChatGPT の次の一歩 — 業務に組み込む 育成・共有・自動化
Avatar for ふくだ（fukuda ryu） rfdnxbro
1
440
テストコードのないプロジェクトにテストを根付かせる
Avatar for Toru Takahashi tttol
0
230
JJUG CCC 2026 Spring　AI時代の開発こそ標準化を武器に！ ― 方式・プロセス・プラットフォームの標準化
Avatar for WatanabeShun s27watanabe
2
640
「使われるデータ基盤」を目指してデータアナリストとワークショップをやった話
Avatar for jackojacko_ jackojacko_
2
940
類似画像検索モデルの開発ノウハウ
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
4
1.1k
Kaggle未経験社員をメダリストに育てる「AIドラゴン桜」
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
0
670
string地獄を脱出する
Avatar for SansanTech sansantech
PRO
1
110
AI フレンドリーなエラー監視を TypeScript で実現する
Avatar for Shinobu Hayashi shinyaigeek
2
190
AIが変えた"品質の守り方"
Avatar for kkakizaki kkakizaki
13
5.5k

Featured

See All Featured
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
Avatar for Eileen M. Uchitelle eileencodes
141
35k
Winning Ecommerce Organic Search in an AI Era - #searchnstuff2025
Avatar for Aleyda Solis aleyda
1
2k
The #1 spot is gone: here's how to win anyway
Avatar for Tamara Novitovic tamaranovitovic
2
1.1k
The Cult of Friendly URLs
Avatar for Andy Hume andyhume
79
6.9k
Bridging the Design Gap: How Collaborative Modelling removes blockers to flow between stakeholders and teams @FastFlow conf
Avatar for Kenny Baas-Schwegler baasie
0
570
The agentic SEO stack - context over prompts
Avatar for schlessera schlessera
0
790
Kristin Tynski - Automating Marketing Tasks With AI
Avatar for Tech SEO Connect techseoconnect
PRO
0
260
Amusing Abliteration
Avatar for ianozsvald ianozsvald
1
190
How to make the Groovebox
Avatar for あそなす asonas
2
2.2k
A Soul's Torment
Avatar for Nat Ma seathinner
6
2.9k
Odyssey Design
Avatar for Ryan Kendrick rkendrick25
PRO
2
650
The Hidden Cost of Media on the Web [PixelPalooza 2025]
Avatar for Tammy Everts tammyeverts
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