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
82

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
780
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
400
Bantu Asap - SS Ceria
Avatar for Sonny Lazuardi sonnylazuardi
0
160
React Native for Mobile App Development
Avatar for Sonny Lazuardi sonnylazuardi
3
530
[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
Node vs Deno vs Bun 〜推しランタイムを見つけよう〜
Avatar for すずとも kamekyame
1
520
The Engineer with a Three-Year Cycle
Avatar for YAMADA Nobuko e99h2121
0
150
Exadata Database Service ソフトウェアのアップデートとアップグレードの概要
Avatar for oracle4engineer oracle4engineer
PRO
1
1.1k
複雑さを受け入れるか、拒むか？ - 事業成長とともに育ったモノリスを前に私が考えたこと #RSGT2026
Avatar for bayashi murabayashi
1
2k
Introduction to Sansan Meishi Maker Development Engineer
Avatar for Sansan, Inc. sansan33
PRO
0
330
形式手法特論：コンパイラの「正しさ」は証明できるか？ #burikaigi / BuriKaigi 2026
Avatar for y_taka_23 ytaka23
17
6.2k
あの夜、私たちは「人間」に戻った。 ── 災害ユートピア、贈与、そしてアジャイルの再構築 / 20260108 Hiromitsu Akiba
Avatar for SHIFT EVOLVE shift_evolve
PRO
0
710
Security Hub と出会ってから 1年半が過ぎました
Avatar for rch850 rch850
0
150
AI との良い付き合い方を僕らは誰も知らない (WSS 2026 静岡版)
Avatar for Asei Sugiyama asei
1
340
Bill One 開発エンジニア 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
4
17k
AWS Network Firewall Proxyで脱Squid運用⁈
Avatar for hr0hr57 nnydtmg
1
100
コミュニティが持つ「学びと成長の場」としての作用 / RSGT2026
Avatar for ama-ch ama_ch
2
340

Featured

See All Featured
Building the Perfect Custom Keyboard
Avatar for Naoto Takai takai
2
670
Abbi's Birthday
Avatar for Violet Bock coloredviolet
0
4.4k
ラッコキーワード サービス紹介資料
Avatar for ラッコ株式会社 rakko
0
2M
A designer walks into a library…
Avatar for Paul Jervis Heath pauljervisheath
210
24k
GitHub's CSS Performance
Avatar for Jon Rohan jonrohan
1032
470k
Groundhog Day: Seeking Process in Gaming for Health
Avatar for Sebastian Deterding codingconduct
0
75
How to audit for AI Accessibility on your Front & Back End
Avatar for davetheseo davetheseo
0
140
Tips & Tricks on How to Get Your First Job In Tech
Avatar for Honza Javorek honzajavorek
0
410
JAMstack: Web Apps at Ludicrous Speed - All Things Open 2022
Avatar for David Neal reverentgeek
1
300
How to optimise 3,500 product descriptions for ecommerce in one day using ChatGPT
Avatar for Katarina Dahlin katarinadahlin
PRO
0
3.4k
Leadership Guide Workshop - DevTernity 2021
Avatar for David Neal reverentgeek
1
180
Design in an AI World
Avatar for tapps tapps
0
130

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