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

Making Interactive Web using Framer Motion

Avatar for Sonny Lazuardi Sonny Lazuardi
June 20, 2020
Technology
89
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
Proxmox超入門
Avatar for とことんDevOps devops_vtj
0
220
インフラを Excel 管理していた組織が 3 ヶ月で IaC 化されるまで
Avatar for ギークプラス ソフトウェア事業部 geekplus_tech
3
190
え！？初参加で 300冊以上 も頒布！？ これは大成功！そのはずなのに わいの財布は 赤字 の件
Avatar for hellohazime hellohazime
0
150
サイボウズ 開発本部採用ピッチ / Cybozu Engineer Recruit
Avatar for Cybozu cybozuinsideout
PRO
10
78k
AIペネトレーションテスト・ セキュリティ検証「AgenticSec」ご紹介資料
Avatar for Sho Nakatani laysakura
0
2.3k
非エンジニア職からZOZOへ 〜登壇がキャリアに与えた影響〜
Avatar for ikechi penpeen
0
470
#jawsugyokohama 100 LT11, "My AWS Journey 2011-2026 - kwntravel"
Avatar for Shinichiro Kawano shinichirokawano
0
290
CDK Insightsで見る、AIによるCDKコード静的解析(+AI解析)
Avatar for Kazuki Adachi k_adachi_01
2
170
Amazon S3 Filesについて
Avatar for Yuuki Yamashita yama3133
2
120
試されDATA SAPPORO [LT]Claude Codeで「ゆっくりデータ分析」
Avatar for Satoru Ishikawa ishikawa_satoru
0
400
目的ファーストのハーネス設計 ~ハーネスの変更容易性を高めるための優先順位~
Avatar for Gota gotalab555
2
320
建設的な現実逃避のしかた / How to practice constructive escapism
Avatar for Pauli pauli
4
340

Featured

See All Featured
Making Projects Easy
Avatar for Brett Harned brettharned
120
6.6k
Digital Projects Gone Horribly Wrong (And the UX Pros Who Still Save the Day) - Dean Schuster
Avatar for UX Y'all uxyall
0
1.1k
Building a A Zero-Code AI SEO Workflow
Avatar for Ian Lurie portentint
PRO
0
440
Site-Speed That Sticks
Avatar for Harry Roberts csswizardry
13
1.2k
From π to Pie charts
Avatar for Rasagy Sharma rasagy
0
160
A designer walks into a library…
Avatar for Paul Jervis Heath pauljervisheath
211
24k
Typedesign – Prime Four
Avatar for Hannes Fritz hannesfritz
42
3k
Statistics for Hackers
Avatar for Jake VanderPlas jakevdp
799
230k
Pawsitive SEO: Lessons from My Dog (and Many Mistakes) on Thriving as a Consultant in the Age of AI
Avatar for David Carrasco davidcarrasco
0
110
AI: The stuff that nobody shows you
Avatar for John Nunemaker jnunemaker
PRO
5
550
Mobile First: as difficult as doing things right
Avatar for Swwweet swwweet
225
10k
Jamie Indigo - Trashchat’s Guide to Black Boxes: Technical SEO Tactics for LLMs
Avatar for Tech SEO Connect techseoconnect
PRO
0
110

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