Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

Making Interactive Web using Framer Motion

Avatar for Sonny Lazuardi Sonny Lazuardi
June 20, 2020
Technology
0
79

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
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
390
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
Kiro Autonomous AgentとKiro Powers の紹介 / kiro-autonomous-agent-and-powers
Avatar for tomoki10 tomoki10
0
350
Uncertainty in the LLM era - Science, more than scale
Avatar for Gael Varoquaux gaelvaroquaux
0
820
Overture Maps Foundationの3年を振り返る
Avatar for Toru Mori moritoru
0
160
生成AIでテスト設計はどこまでできる？ 「テスト粒度」を操るテーラリング術
Avatar for ks shota_kusaba
0
630
最近のLinux普段づかいWaylandデスクトップ元年
Avatar for Takuma Nakajima penguin2716
1
680
生成AI時代におけるグローバル戦略思考
Avatar for Takaaki Yayoi taka_aki
0
110
小さな判断で育つ、大きな意思決定力 / 20251204 Takahiro Kinjo
Avatar for SHIFT EVOLVE shift_evolve
PRO
1
590
A Compass of Thought: Guiding the Future of Test Automation ( #jassttokai25 , #jassttokai )
Avatar for teyamagu teyamagu
PRO
1
250
因果AIへの招待
Avatar for Shohei SHIMIZU sshimizu2006
0
940
乗りこなせAI駆動開発の波
Avatar for Ikko Eltociear Ashimine eltociear
1
1k
Microsoft Agent 365 を 30 分でなんとなく理解する
Avatar for skmkzyk skmkzyk
1
1k
20251209_WAKECareer_生成AIを活用した設計・開発プロセス
Avatar for syobochim syobochim
5
1.4k

Featured

See All Featured
Unsuck your backbone
Avatar for Amy Palamountain ammeep
671
58k
Optimizing for Happiness
Avatar for Tom Preston-Werner mojombo
379
70k
A better future with KSS
Avatar for Kyle Neath kneath
240
18k
Faster Mobile Websites
Avatar for Dean Hume deanohume
310
31k
A Tale of Four Properties
Avatar for Chris Coyier chriscoyier
162
23k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
Avatar for Aki / @LoveIdahoBurger aki_iinuma
128
54k
Site-Speed That Sticks
Avatar for Harry Roberts csswizardry
13
990
Art, The Web, and Tiny UX
Avatar for Lynn Fisher lynnandtonic
303
21k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
Avatar for Dan Newman danielanewman
231
22k
jQuery: Nuts, Bolts and Bling
Avatar for Doug Neiner dougneiner
65
8.2k
Embracing the Ebb and Flow
Avatar for Simon Collison colly
88
4.9k
The Web Performance Landscape in 2024 [PerfNow 2024]
Avatar for Tammy Everts tammyeverts
12
970

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