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

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
490
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
150
React Native for Mobile App Development
Avatar for Sonny Lazuardi sonnylazuardi
3
520
[Sidang] Layanan Basis Data Real Time NoSQL untuk Kolaborasi Web Audio Editor
Avatar for Sonny Lazuardi sonnylazuardi
0
200

Other Decks in Technology

See All in Technology
「改善」ってこれでいいんだっけ？
Avatar for うきぐも / すずき ukigmo_hiro
0
390
Implementing and Evaluating a High-Level Language with WasmGC and the Wasm Component Model: Scala’s Case
Avatar for Rikito Taniguchi tanishiking
0
160
AIフル活用で挑む！空間アプリ開発のリアル
Avatar for TAAT taat
0
130
データ戦略部門 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
1
3.8k
初めてのDatabricks Apps開発
Avatar for Takaaki Yayoi taka_aki
1
230
AIとともに歩んでいくデザイナーの役割の変化
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
0
760
AI時代、“平均値”ではいられない
Avatar for uhyo uhyo
4
960
OCIjp_Oracle AI World_Recap
Avatar for Shinya Omori shinpy
1
150
Contract One Engineering Unit 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
0
8.9k
物体検出モデルでシイタケの収穫時期を自動判定してみた。 #devio2025
Avatar for Lamaglama39 lamaglama39
0
260
Biz職でもDifyでできる！ 「触らないAIワークフロー」を実現する方法
Avatar for kanacan igarashikana
3
1.2k
今この時代に技術とどう向き合うべきか
Avatar for gree_tech gree_tech
PRO
2
2.1k

Featured

See All Featured
Agile that works and the tools we love
Avatar for Rasmus Luckow-Nielsen rasmusluckow
331
21k
Art, The Web, and Tiny UX
Avatar for Lynn Fisher lynnandtonic
303
21k
We Have a Design System, Now What?
Avatar for Morgane Peng morganepeng
53
7.8k
Building Adaptive Systems
Avatar for Chris Keathley keathley
44
2.8k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
Avatar for Chris Coyier chriscoyier
508
140k
Reflections from 52 weeks, 52 projects
Avatar for Jefferson Lam jeffersonlam
353
21k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
Avatar for Morgane Peng morganepeng
132
19k
The Cost Of JavaScript in 2023
Avatar for Addy Osmani addyosmani
55
9.1k
JavaScript: Past, Present, and Future - NDC Porto 2020
Avatar for David Neal reverentgeek
52
5.7k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
Avatar for Marc Duiker marcduiker
34
2.3k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
Avatar for Joe Casabona jcasabona
34
2.5k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
Avatar for Tammy Everts tammyeverts
55
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