Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Making Interactive Web using Framer Motion

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for Sonny Lazuardi Sonny Lazuardi
June 20, 2020
Technology
0
88

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
310
The Story of Making Figma Plugins
Avatar for Sonny Lazuardi sonnylazuardi
4
260
UX Prototyping Tools
Avatar for Sonny Lazuardi sonnylazuardi
5
790
Clean Code in Javascript
Avatar for Sonny Lazuardi sonnylazuardi
5
510
React Native for Unified Codebase
Avatar for Sonny Lazuardi sonnylazuardi
0
320
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
170
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
220

Other Decks in Technology

See All in Technology
visionOS 開発向けの MCP / Skills をつくり続けることで XR の探究と学習を最大化
Avatar for kazuhiro hara karad
1
1.2k
頼れる Agentic AI を支える Datadog のオブザーバビリティ / Powering Reliable Agentic AI with Datadog Observability
Avatar for Kento Kimura aoto
PRO
0
240
Cortex Code CLI と一緒に進めるAgentic Data Engineering
Avatar for あれ __allllllllez__
0
550
VPCエンドポイント意外とお金かかるなぁ。せや、共有したろ！
Avatar for tommy tommy0124
1
720
GCASアップデート（202601-202603）
Avatar for 高橋広和 techniczna
0
240
中央集権型を脱却した話　分散型をやめて、連邦型にたどり着くまで
Avatar for SansanTech sansantech
PRO
1
170
20260323_データ分析基盤でGeminiを使う話
Avatar for yuichi 1210yuichi0
0
140
ガバメントクラウドにおけるAWSの長期継続割引について
Avatar for takeda_h takeda_h
2
5.4k
Phase08_クイックウィン実装
Avatar for overflow ,Inc overflowinc
0
470
Phase11_戦略的AI経営
Avatar for overflow ,Inc overflowinc
0
400
LINEヤフーにおけるAIOpsの現在地
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
4
1.5k
Phase01_AI座学_基礎
Avatar for overflow ,Inc overflowinc
0
1.1k

Featured

See All Featured
Building Experiences: Design Systems, User Experience, and Full Site Editing
Avatar for Michelle Schulp Hunt marktimemedia
0
450
A Modern Web Designer's Workflow
Avatar for Chris Coyier chriscoyier
698
190k
The Straight Up "How To Draw Better" Workshop
Avatar for Dennis Kardys denniskardys
239
140k
Raft: Consensus for Rubyists
Avatar for Patrick Van Stee vanstee
141
7.4k
A better future with KSS
Avatar for Kyle Neath kneath
240
18k
jQuery: Nuts, Bolts and Bling
Avatar for Doug Neiner dougneiner
65
8.4k
Git: the NoSQL Database
Avatar for Brandon Keepers bkeepers
PRO
432
66k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
Avatar for Kevin Liebholz kevinliebholz
37
6.3k
Embracing the Ebb and Flow
Avatar for Simon Collison colly
88
5k
WCS-LA-2024
Avatar for Leonardo Collado-Torres lcolladotor
0
490
The Curse of the Amulet
Avatar for Matthew Lei leimatthew05
1
10k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
Avatar for Eileen M. Uchitelle eileencodes
26
3.4k

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