Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

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
100
0

Making Interactive Web using Framer Motion

Jogja JS talk, 20th June 2020

Avatar for Sonny Lazuardi

Sonny Lazuardi

June 20, 2020

More Decks by Sonny Lazuardi

See All by Sonny Lazuardi
Artificial Intelligence & Design Plugin
Avatar for Sonny Lazuardi sonnylazuardi
0
330
The Story of Making Figma Plugins
Avatar for Sonny Lazuardi sonnylazuardi
4
270
UX Prototyping Tools
Avatar for Sonny Lazuardi sonnylazuardi
5
800
Clean Code in Javascript
Avatar for Sonny Lazuardi sonnylazuardi
5
530
React Native for Unified Codebase
Avatar for Sonny Lazuardi sonnylazuardi
0
330
Native Mobile App with Javascript - React Native - Code Push
Avatar for Sonny Lazuardi sonnylazuardi
0
420
Bantu Asap - SS Ceria
Avatar for Sonny Lazuardi sonnylazuardi
0
180
React Native for Mobile App Development
Avatar for Sonny Lazuardi sonnylazuardi
3
550
[Sidang] Layanan Basis Data Real Time NoSQL untuk Kolaborasi Web Audio Editor
Avatar for Sonny Lazuardi sonnylazuardi
0
240

Other Decks in Technology

See All in Technology
Refining Active Record
Avatar for Shugo Maeda shugo
0
140
WasmをRustにする
Avatar for SansanTech sansantech
PRO
0
250
初対面のメンバーがチームを組み、Claude Codeでゼロからサービスをリリース
Avatar for k.masachika mkdev10
1
130
Benchmarking Disaggregated Serving on vLLM + Dynamo with a Real Coding-Agent Workload
Avatar for NTT docomo Business nttcom
1
180
V8のArray.prototype.flatを最大約20倍速くするまでと、巨大OSSへの大規模コミットの道のり
Avatar for Riya Amemiya riyaamemiya
0
290
Active Record Connection Adaptersにおける長年の課題に再び取り組む
Avatar for Yasuo Honda yahonda
0
130
しろおびから始める！ログ活用の第一歩
Avatar for Shumei Ito shumei_ito
0
940
夫婦で子育てするための育児標準化
Avatar for コドモン開発チーム codmoninc
PRO
0
210
Metadata - Section 1: HTML Basics
Avatar for mohab soliman mohab1
0
110
事業活動を AI Ready にする攻めと守りのデータエンジニアリング / data-engineering-for-ai-ready-business
Avatar for pei0804 pei0804
7
2.8k
二歩目のフロントエンド・ウェブアクセシビリティ
Avatar for KAMIHARA Takumi camiha
2
510
脆弱性診断って、何をしているの？ 〜弱点を見つけて、会社の改善につなげるまで〜
Avatar for KeeG keeg
0
910

Featured

See All Featured
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
Avatar for Michelle Schulp Hunt marktimemedia
31
2.9k
Why Our Code Smells
Avatar for Brandon Keepers bkeepers
PRO
340
58k
Noah Learner - AI + Me: how we built a GSC Bulk Export data pipeline
Avatar for Tech SEO Connect techseoconnect
PRO
0
460
The Organizational Zoo: Understanding Human Behavior Agility Through Metaphoric Constructive Conversations (based on the works of Arthur Shelley, Ph.D)
Avatar for Dr. Kim W Petersen kimpetersen
PRO
0
500
Fantastic passwords and where to find them - at NoRuKo
Avatar for Phil Nash philnash
53
4k
StorybookのUI Testing Handbookを読んだ
Avatar for Shingo Yamazaki zakiyama
31
7k
Writing Fast Ruby
Avatar for Erik Berlin sferik
630
63k
Done Done
Avatar for chrislema chrislema
187
17k
Exploring the relationship between traditional SERPs and Gen AI search
Avatar for Ray Grieselhuber raygrieselhuber
PRO
4
4.4k
My Coaching Mixtape
Avatar for mlcsv mlcsv
0
350
The World Runs on Bad Software
Avatar for Brandon Keepers bkeepers
PRO
72
12k
Ethics towards AI in product and experience design
Avatar for Skipper Chong Warson skipperchong
2
430

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