$30 off During Our Annual Pro Sale. View Details »

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
Claude Code Getting Started Guide(en)
Avatar for Oikon oikon48
0
170
Gemini でコードレビュー知見を見える化
Avatar for ZOZO Developers zozotech
PRO
1
130
Oracle Cloud Infrastructure：2025年11月度サービス・アップデート
Avatar for oracle4engineer oracle4engineer
PRO
2
170
Symfony AI in Action
Avatar for Christopher Hertel el_stoffel
2
390
Agents IA : la nouvelle frontière des LLMs (Tech.Rocks Summit 2025)
Avatar for Guillaume Laforge glaforge
0
460
21st ACRi Webinar - Univ of Tokyo Presentation Slide (Ayumi Ohno)
Avatar for Nao Sumikawa nao_sumikawa
0
120
.NET 10 のパフォーマンス改善
Avatar for neno nenonaninu
2
4.9k
安いGPUレンタルサービスについて
Avatar for Aratako aratako
2
2.6k
HIG学習用スライド
Avatar for 野瀬田　裕樹 yuukiw00w
0
110
Product Engineer
Avatar for Resilire resilire
0
150
ML PM Talk #1 - ML PMの分類に関する考察
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
1
650
Oracle Database@AWS：サービス概要のご紹介
Avatar for oracle4engineer oracle4engineer
PRO
0
160

Featured

See All Featured
[RailsConf 2023 Opening Keynote] The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
31
9.8k
Performance Is Good for Brains [We Love Speed 2024]
Avatar for Tammy Everts tammyeverts
12
1.3k
Scaling GitHub
Avatar for Zach Holman holman
464
140k
BBQ
Avatar for Matthew Crist matthewcrist
89
9.9k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
Avatar for Tammy Everts tammyeverts
55
3.1k
Speed Design
Avatar for Sergey Chernyshev sergeychernyshev
33
1.4k
Why Our Code Smells
Avatar for Brandon Keepers bkeepers
PRO
340
57k
GraphQLの誤解/rethinking-graphql
Avatar for sonatard sonatard
73
11k
The Invisible Side of Design
Avatar for Vitaly Friedman smashingmag
302
51k
Building a Modern Day 
E-commerce SEO Strategy
Avatar for Aleyda Solis aleyda
45
8.3k
No one is an island. Learnings from fostering a developers community.
Avatar for Antonio thoeni
21
3.5k
JavaScript: Past, Present, and Future - NDC Porto 2020
Avatar for David Neal reverentgeek
52
5.7k

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