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

Making Interactive Web using Framer Motion

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
Avatar for Sonny Lazuardi Sonny Lazuardi
June 20, 2020
Technology
0
86

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
780
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
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
220

Other Decks in Technology

See All in Technology
Devinを導入したら予想外の人たちに好評だった
Avatar for Takafumi Omuro tomuro
0
540
マイグレーションガイドに書いてないRiverpod 3移行話
Avatar for AOKI Taiju taiju59
0
330
AIに視覚を与えモバイルアプリケーション開発をより円滑に行う
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
1
580
技術キャッチアップ効率化を実現する記事推薦システムの構築
Avatar for Yudai Hayashi yudai00
2
160
LY Tableauでの Tableau x AIの実践 (at Tableau Now! - 2026-02-26)
Avatar for Yoshitaka Arakawa yoshitakaarakawa
0
960
生成AI活用によるPRレビュー改善の歩み
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
4
1.7k
AI Coding Agentの地殻変動 ～ ai-coding.info の定点観測 ～
Avatar for kotauchisunsun kotauchisunsun
1
490
AIエージェントで変わる開発プロセス ― レビューボトルネックからの脱却
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
2
790
トラブルの大半は「言ってない」x「言ってない」じゃねーか！！
Avatar for nakamichi ichimichi
0
210
社内ワークショップで終わらせない 業務改善AIエージェント開発
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
1
400
2026年のAIエージェント構築はどうなる？
Avatar for みのるん minorun365
12
2.9k
Snowflake Night #2 LT
Avatar for タロウ taromatsui_cccmkhd
0
270

Featured

See All Featured
10 Git Anti Patterns You Should be Aware of
Avatar for Lemi Orhan Ergin lemiorhan
PRO
659
61k
Making the Leap to Tech Lead
Avatar for Ryan Cromwell cromwellryan
135
9.7k
The Straight Up "How To Draw Better" Workshop
Avatar for Dennis Kardys denniskardys
239
140k
The Illustrated Guide to Node.js - THAT Conference 2024
Avatar for David Neal reverentgeek
1
280
How to Get Subject Matter Experts Bought In and Actively Contributing to SEO & PR Initiatives.
Avatar for Liv Day livdayseo
0
77
How to Think Like a Performance Engineer
Avatar for Harry Roberts csswizardry
28
2.5k
Future Trends and Review - Lecture 12 - Web Technologies (1019888BNR)
Avatar for Beat Signer signer
PRO
0
3.2k
How to Ace a Technical Interview
Avatar for Jacob Kaplan-Moss jacobian
281
24k
Paper Plane (Part 1)
Avatar for Katie Cordina Lindsey katiecoart
PRO
0
5k
The Web Performance Landscape in 2024 [PerfNow 2024]
Avatar for Tammy Everts tammyeverts
12
1k
4 Signs Your Business is Dying
Avatar for Josh Pigford shpigford
187
22k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
Avatar for Irina Nazarova irinanazarova
9
1.2k

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