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
94
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
320
The Story of Making Figma Plugins
Avatar for Sonny Lazuardi sonnylazuardi
4
270
UX Prototyping Tools
Avatar for Sonny Lazuardi sonnylazuardi
5
790
Clean Code in Javascript
Avatar for Sonny Lazuardi sonnylazuardi
5
520
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
AIで変わるエンジニアの働き方（仮）
Avatar for naoinaoi naoinaoi
0
560
「ミスを許さない手順書」を作ってみた 〜 個人的にはこれ以上できることはあまりなさそう/20260827-ssmjp-operation-procedure-update
Avatar for opelab opelab
4
1.9k
AI開発に用いられるHPC技術について
Avatar for GPU UNITE gpuunite_official
0
290
All About Sansan – for New Global Engineers
Avatar for Sansan, Inc. sansan33
PRO
1
1.5k
AI時代の「OAuth認証」にどう物申すか？（OAuth/OIDC Numa (Immersion) Workshop 2026）
Avatar for OpenID Foundation Japan oidfj
PRO
0
280
AWS Blocks が楽しい #ゆるWeb札幌
Avatar for Kihara, Takuya tacck
PRO
0
150
【書籍出版記念】 10周回って、エージェント開発は RAGがすべてだった。〜RAGの歴史と開発現場で見えた実践知〜
Avatar for 為藤アキラ akiratameto
20
7.6k
Kiro Crew で始める マルチエージェント開発
Avatar for Kazuki Miura miu_crescent
PRO
0
190
サーバー常駐型の 簡易障害調査AI エージェントを作ってみた話
Avatar for masayoshi masayoshi
0
170
【５分でわかる】セーフィー エンジニア向け会社紹介
Avatar for Safie safie_recruit
0
54k
紙 to デジタル
Avatar for ichien178 ichien178
0
160
GopherCon @シアトル に行ってきました
Avatar for Takuto Nagami logica0419
0
290

Featured

See All Featured
Paper Plane
Avatar for Katie Cordina Lindsey katiecoart
PRO
2
53k
How to Ace a Technical Interview
Avatar for Jacob Kaplan-Moss jacobian
281
24k
AI Search: Implications for SEO and How to Move Forward - #ShenzhenSEOConference
Avatar for Aleyda Solis aleyda
1
1.3k
More Than Pixels: Becoming A User Experience Designer
Avatar for Michelle Schulp Hunt marktimemedia
3
500
Helping Users Find Their Own Way: Creating Modern Search Experiences
Avatar for Dan Newman danielanewman
31
3.3k
The untapped power of vector embeddings
Avatar for Frank van Dijk frankvandijk
2
1.8k
Reality Check: Gamification 10 Years Later
Avatar for Sebastian Deterding codingconduct
0
2.3k
Tell your own story through comics
Avatar for letsgokoyo letsgokoyo
1
1k
Everyday Curiosity
Avatar for Cassini Nazir cassininazir
0
290
Have SEOs Ruined the Internet? - User Awareness of SEO in 2025
Avatar for Akash Hashmi akashhashmi
0
450
GraphQLの誤解/rethinking-graphql
Avatar for sonatard sonatard
75
12k
Optimising Largest Contentful Paint
Avatar for Harry Roberts csswizardry
37
3.9k

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