Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

Making Interactive Web using Framer Motion

Avatar for Sonny Lazuardi Sonny Lazuardi
June 20, 2020
Technology
100
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
330
The Story of Making Figma Plugins
Avatar for Sonny Lazuardi sonnylazuardi
4
280
UX Prototyping Tools
Avatar for Sonny Lazuardi sonnylazuardi
5
800
Clean Code in Javascript
Avatar for Sonny Lazuardi sonnylazuardi
5
530
React Native for Unified Codebase
Avatar for Sonny Lazuardi sonnylazuardi
0
330
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
550
[Sidang] Layanan Basis Data Real Time NoSQL untuk Kolaborasi Web Audio Editor
Avatar for Sonny Lazuardi sonnylazuardi
0
240

Other Decks in Technology

See All in Technology
基本から分かる！AWSセキュリティ運用の考え方と任せ方
Avatar for cm-usuda-keisuke cmusudakeisuke
1
430
Kiro 入門 (1 つのエージェントを、どの画面からでも) | 目指せ Kiro マスター 01
Avatar for Riku INADA inariku
PRO
4
840
AIコーディングはじめました
Avatar for 田中みそ miso
0
150
視野はAIに、視座は人に / ai-for-breadth-humans-for-perspective
Avatar for Yukiya Nakagawa nkzn
6
3.1k
Kiro Crew の Bot (続く役目を任せる窓口) | 目指せ Kiro マスター 12
Avatar for Riku INADA inariku
PRO
2
280
セキュリティ専任チームなしで攻撃を先回りするSREが実践したSIEM on Amazon OpenSearch Service
Avatar for サイバーセキュリティクラウド cscengineer
PRO
0
430
新米を「売り越さない」、Aurora DSQLで作る在庫ゼロ死守の限定ドロップEC
Avatar for Yuuki Yamashita yama3133
0
180
TSKaigi Sendai 2026 - tsgo時代のTypeScript Playgroundはどう動くか
Avatar for teamLab teamlab
PRO
0
110
コードレビューをなくして見えたもの
Avatar for henteko henteko
0
140
Oracle Database Security 詳細解説
Avatar for oracle4engineer oracle4engineer
PRO
2
270
HQ駆動開発で最高のAI-Contextを作ろう
Avatar for SansanTech sansantech
PRO
1
110
Building Audio Plugin Ecosystem for Android in 2026
Avatar for Atsushi Eno atsushieno
2
150

Featured

See All Featured
Understanding Cognitive Biases in Performance Measurement
Avatar for Philip Tellis bluesmoon
32
3.1k
AI in Enterprises - Java and Open Source to the Rescue
Avatar for ivargrimstad ivargrimstad
0
1.6k
Speed Design
Avatar for Sergey Chernyshev sergeychernyshev
33
2.2k
Ten Tips & Tricks for a 🌱 transition
Avatar for Manu Carrasco Molina stuffmc
1
280
Bootstrapping a Software Product
Avatar for Garrett Dimon garrettdimon
PRO
306
120k
Typedesign – Prime Four
Avatar for Hannes Fritz hannesfritz
42
3.2k
Being A Developer After 40
Avatar for Adrian Kosmaczewski akosma
PRO
92
590k
The B2B funnel & how to create a winning content strategy
Avatar for Katarina Dahlin katarinadahlin
PRO
1
610
Building Applications with DynamoDB
Avatar for Matt Wood mza
96
7.3k
Claude Code どこまでも/ Claude Code Everywhere
Avatar for nwiizo nwiizo
68
60k
AI Search: Implications for SEO and How to Move Forward - #ShenzhenSEOConference
Avatar for Aleyda Solis aleyda
1
1.4k
Side Projects
Avatar for Sacha Greif sachag
456
43k

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