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
88
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
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
Databricks Lakebaseを用いたAIエージェント連携
Avatar for Daiki Akimoto NTTD daiki_akimoto_nttd
0
150
Podcast配信で広がったアウトプットの輪～70人と音声発信してきた7年間～/outputconf_01
Avatar for FORTE fortegp05
0
230
ストライクウィッチーズ2期6話のエイラの行動が許せないのでPjMの観点から何をすべきだったのかを考える
Avatar for nakamichi ichimichi
1
170
最大のアウトプット術は問題を作ること
Avatar for ryoAccount ryoaccount
0
300
Oracle AI Database@Azure：サービス概要のご紹介
Avatar for oracle4engineer oracle4engineer
PRO
6
1.4k
推し活エージェント
Avatar for ゆんたん yuntan_t
1
830
【PHPカンファレンス小田原2026】Webアプリケーションエンジニアにも知ってほしい オブザーバビリティ の本質
Avatar for Futoshi Endo fendo181
0
190
AIを活用したアクセシビリティ改善フロー
Avatar for 出口 裕貴 degudegu2510
1
140
Kubernetes基盤における開発者体験 とセキュリティの両⽴ / Balancing developer experience and security in a Kubernetes-based environment
Avatar for mekka chmikata
0
170
組織的なAI活用を阻む 最大のハードルは コンテキストデザインだった
Avatar for KuboSeiya ixbox
1
640
AIドリブン開発の実践知 ― AI-DLC Unicorn Gym実施から見えた可能性と課題
Avatar for MIXI ENGINEERS mixi_engineers
PRO
0
110
ADOTで始めるサーバレスアーキテクチャのオブザーバビリティ
Avatar for Ryotaro Harada alchemy1115
2
160

Featured

See All Featured
The Psychology of Web Performance [Beyond Tellerrand 2023]
Avatar for Tammy Everts tammyeverts
49
3.4k
Large-scale JavaScript Application Architecture
Avatar for Addy Osmani addyosmani
515
110k
From π to Pie charts
Avatar for Rasagy Sharma rasagy
0
160
The MySQL Ecosystem @ GitHub 2015
Avatar for Sam Lambert samlambert
251
13k
SEO Brein meetup: CTRL+C is not how to scale international SEO
Avatar for Linda Hogenes lindahogenes
1
2.5k
Java REST API Framework Comparison - PWX 2021
Avatar for Matt Raible mraible
34
9.2k
Building Adaptive Systems
Avatar for Chris Keathley keathley
44
3k
JAMstack: Web Apps at Ludicrous Speed - All Things Open 2022
Avatar for David Neal reverentgeek
1
410
Unsuck your backbone
Avatar for Amy Palamountain ammeep
672
58k
Why Our Code Smells
Avatar for Brandon Keepers bkeepers
PRO
340
58k
Documentation Writing (for coders)
Avatar for Carmen Chung carmenintech
77
5.3k
Accessibility Awareness
Avatar for Sarah Abderemane sabderemane
0
93

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