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
0
72

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
490
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
150
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
200

Other Decks in Technology

See All in Technology
自社製CMSからmicroCMSへのリプレースがプロダクトグロースを加速させた話
Avatar for nextbeat-engineer nextbeatdev
0
140
MySQL HeatWave：サービス概要のご紹介
Avatar for oracle4engineer oracle4engineer
PRO
4
1.7k
Evolution on AI Agent and Beyond - AGI への道のりと、シンギュラリティの３つのシナリオ
Avatar for Masaya Mori (森正弥) / CAIO (Chief AI Officer) masayamoriofficial
0
180
microCMS 最新リリース情報（microCMS Meetup 2025）
Avatar for microCMS microcms
0
110
Product Management Conference -AI時代に進化するPdM-
Avatar for Yuta Kojima kojima111
0
220
退屈なことはDevinにやらせよう〜〜Devin APIを使ったVisual Regression Testの自動追加〜
Avatar for ryo kawamataryo
3
670
AIエージェント就活入門 - MCPが履歴書になる未来
Avatar for Ikko Eltociear Ashimine eltociear
0
520
夢の印税生活 / Life on Royalties
Avatar for とみたまさひろ tmtms
0
280
あとはAIに任せて人間は自由に生きる
Avatar for Kentaro Kuribayashi kentaro
3
1.1k
新卒(ほぼ)専業Kagglerという選択肢
Avatar for Ryota nocchi1
1
2.3k
Webアクセシビリティ入門
Avatar for Recruit recruitengineers
PRO
1
260
Preferred Networks (PFN) とLLM Post-Training チームの紹介 / 第4回 関東Kaggler会 スポンサーセッション
Avatar for Preferred Networks pfn
PRO
1
220

Featured

See All Featured
How to Think Like a Performance Engineer
Avatar for Harry Roberts csswizardry
25
1.8k
JavaScript: Past, Present, and Future - NDC Porto 2020
Avatar for David Neal reverentgeek
50
5.5k
Building Adaptive Systems
Avatar for Chris Keathley keathley
43
2.7k
Product Roadmaps are Hard
Avatar for C. Todd Lombardo iamctodd
PRO
54
11k
Bash Introduction
Avatar for André Augusto Costa Santos 62gerente
614
210k
VelocityConf: Rendering Performance Case Studies
Avatar for Addy Osmani addyosmani
332
24k
The Illustrated Children's Guide to Kubernetes
Avatar for Chris Short chrisshort
48
50k
No one is an island. Learnings from fostering a developers community.
Avatar for Antonio thoeni
21
3.4k
The World Runs on Bad Software
Avatar for Brandon Keepers bkeepers
PRO
70
11k
XXLCSS - How to scale CSS and keep your sanity
Avatar for Zaharenia Atzitzikaki sugarenia
248
1.3M
Rails Girls Zürich Keynote
Avatar for Gregor Martynus gr2m
95
14k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
Avatar for Michelle Schulp Hunt marktimemedia
31
2.5k

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