Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

Making Interactive Web using Framer Motion

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

Making Interactive Web using Framer Motion

Jogja JS talk, 20th June 2020

Avatar for Sonny Lazuardi

Sonny Lazuardi

June 20, 2020
Tweet

More Decks by Sonny Lazuardi

See All by Sonny Lazuardi
Artificial Intelligence & Design Plugin
Avatar for Sonny Lazuardi sonnylazuardi
0
300
The Story of Making Figma Plugins
Avatar for Sonny Lazuardi sonnylazuardi
4
250
UX Prototyping Tools
Avatar for Sonny Lazuardi sonnylazuardi
5
770
Clean Code in Javascript
Avatar for Sonny Lazuardi sonnylazuardi
5
500
React Native for Unified Codebase
Avatar for Sonny Lazuardi sonnylazuardi
0
310
Native Mobile App with Javascript - React Native - Code Push
Avatar for Sonny Lazuardi sonnylazuardi
0
390
Bantu Asap - SS Ceria
Avatar for Sonny Lazuardi sonnylazuardi
0
160
React Native for Mobile App Development
Avatar for Sonny Lazuardi sonnylazuardi
3
520
[Sidang] Layanan Basis Data Real Time NoSQL untuk Kolaborasi Web Audio Editor
Avatar for Sonny Lazuardi sonnylazuardi
0
210

Other Decks in Technology

See All in Technology
pmconf2025 - データを活用し「価値」へ繋げる
Avatar for Emy - Emiko Yoshihara glorypulse
0
630
グレートファイアウォールを自宅に建てよう
Avatar for 綿糸てせ ctes091x
0
130
日本Rubyの会の構造と実行とあと何か / hokurikurk01
Avatar for Masayoshi Takahashi takahashim
4
800
形式手法特論：CEGAR を用いたモデル検査の状態空間削減 #kernelvm / Kernel VM Study Hokuriku Part 8
Avatar for y_taka_23 ytaka23
2
400
Multimodal AI Driving Solutions to Societal Challenges
Avatar for Semantic Machine Intelligence Lab., Keio Univ. keio_smilab
PRO
1
130
MS Ignite 2025で発表されたFoundry IQをRecap
Avatar for Akira Sato satodayo
3
250
Bakuraku Engineering Team Deck
Avatar for LayerX layerx
PRO
12
6.6k
オープンデータの内製化から分かったGISデータを巡る行政の課題
Avatar for 室木直樹 naokim84
2
1.4k
Agents IA : la nouvelle frontière des LLMs (Tech.Rocks Summit 2025)
Avatar for Guillaume Laforge glaforge
0
460
モバイルゲーム開発におけるエージェント技術活用への試行錯誤 ～開発効率化へのアプローチの紹介と未来に向けた展望～
Avatar for QualiArts qualiarts
0
530
計算機科学をRubyと歩む 〜DFA型正規表現エンジンをつくる～
Avatar for ydah ydah
3
130
AWS Bedrock AgentCoreで作る 1on1支援AIエージェント 〜Memory × Evaluationsによる実践開発〜
Avatar for Yusuke Shimizu yusukeshimizu
4
270

Featured

See All Featured
Improving Core Web Vitals using Speculation Rules API
Avatar for Sergey Chernyshev sergeychernyshev
21
1.3k
Facilitating Awesome Meetings
Avatar for Lara Hogan lara
57
6.7k
Easily Structure & Communicate Ideas using Wireframe
Avatar for Afnizar Nur Ghifari afnizarnur
194
17k
Designing Dashboards & Data Visualisations in Web Apps
Avatar for Des Traynor destraynor
231
54k
Optimising Largest Contentful Paint
Avatar for Harry Roberts csswizardry
37
3.5k
Automating Front-end Workflow
Avatar for Addy Osmani addyosmani
1371
200k
Sharpening the Axe: The Primacy of Toolmaking
Avatar for Bryan Cantrill bcantrill
46
2.6k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
Avatar for Morgane Peng morganepeng
132
19k
The Straight Up "How To Draw Better" Workshop
Avatar for Dennis Kardys denniskardys
239
140k
GraphQLとの向き合い方2022年版
Avatar for Yosuke Kurami quramy
50
14k
Context Engineering - Making Every Token Count
Avatar for Addy Osmani addyosmani
9
480
The Art of Delivering Value - GDevCon NA Keynote
Avatar for David Neal reverentgeek
16
1.8k

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