$30 off During Our Annual Pro Sale. View Details »

Making Interactive Web using Framer Motion

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

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
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
AWSに革命を起こすかもしれない新サービス・アップデートについてのお話
Avatar for Yuuki Yamashita yama3133
0
430
AI時代の新規LLMプロダクト開発: Findy Insightsを3ヶ月で立ち上げた舞台裏と振り返り
Avatar for Dakuon dakuon
0
350
Connection-based OAuthから学ぶOAuth for AI Agents
Avatar for GMO Flatt Security flatt_security
0
200
普段使ってるClaude Skillsの紹介(by Notebooklm)
Avatar for Higuchi kokoro zerebom
5
1.4k
ESXi のAIOps だ！2025冬
Avatar for Unno Wataru unnowataru
0
140
AWS運用を効率化する！AWS Organizationsを軸にした一元管理の実践/nikkei-tech-talk-202512
Avatar for 日本経済新聞社 エンジニア採用事務局 nikkei_engineer_recruiting
0
140
1人1サービス開発しているチームでのClaudeCodeの使い方
Avatar for おーしろ noayaoshiro
2
530
Oracle Database@Azure：サービス概要のご紹介
Avatar for oracle4engineer oracle4engineer
PRO
2
170
CARTAのAI CoE が挑む「事業を進化させる AI エンジニアリング」 / carta ai coe evolution business ai engineering
Avatar for CARTA Engineering carta_engineering
0
2.1k
高度サイバー人材育成専科（後半）
Avatar for Nomizo Nomizo nomizone
0
250
業務のトイルをバスターせよ 〜AI時代の生存戦略〜
Avatar for staka staka121
PRO
2
240
S3を正しく理解するための内部構造の読解
Avatar for NRI Netcom nrinetcom
PRO
3
220

Featured

See All Featured
Lessons Learnt from Crawling 1000+ Websites
Avatar for Charles Meaden charlesmeaden
0
940
Product Roadmaps are Hard
Avatar for C. Todd Lombardo iamctodd
PRO
55
12k
Highjacked: Video Game Concept Design
Avatar for Ryan Kendrick rkendrick25
PRO
0
240
Introduction to Domain-Driven Design and Collaborative software design
Avatar for Kenny Baas-Schwegler baasie
1
500
The Anti-SEO Checklist Checklist. Pubcon Cyber Week
Avatar for Ryan Jones ryanjones
0
23
Self-Hosted WebAssembly Runtime for Runtime-Neutral Checkpoint/Restore in Edge–Cloud Continuum
Avatar for Yuki Nakata chikuwait chikuwait
0
29
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
Avatar for Dan Newman danielanewman
231
22k
The Invisible Side of Design
Avatar for Vitaly Friedman smashingmag
302
51k
Building Experiences: Design Systems, User Experience, and Full Site Editing
Avatar for Michelle Schulp Hunt marktimemedia
0
320
Build your cross-platform service in a week with App Engine
Avatar for Jose L jlugia
234
18k
Bridging the Design Gap: How Collaborative Modelling removes blockers to flow between stakeholders and teams @FastFlow conf
Avatar for Kenny Baas-Schwegler baasie
0
400
Helping Users Find Their Own Way: Creating Modern Search Experiences
Avatar for Dan Newman danielanewman
31
3k

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