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
72

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
新規案件の立ち上げ専門チームから見たAI駆動開発の始め方
Avatar for ShuyaKinjo shuyakinjo
0
120
AIとTDDによるNext.js「隙間ツール」開発の実践
Avatar for Makoto Tateno makotot
6
690
「守る」から「進化させる」セキュリティへ ~AWS re:Inforce 2025参加報告~ / AWS re:Inforce 2025 Participation Report
Avatar for Yuji Oshima yuj1osm
1
130
【５分でわかる】セーフィー エンジニア向け会社紹介
Avatar for Safie safie_recruit
0
30k
フルカイテン株式会社 エンジニア向け採用資料
Avatar for FULL KAITEN fullkaiten
0
8.6k
帳票Vibe Coding
Avatar for terurou terurou
0
140
Effective Match Types - Scala Days 2025
Avatar for Jamie Thompson bishabosha
1
100
Devinを使ったモバイルアプリ開発 / Mobile app development with Devin
Avatar for Yuki Anzai yanzm
0
190
生成AI利用プログラミング：誰でもプログラムが書けると 世の中どうなる？/opencampus202508
Avatar for Oka Natsuki okana2ki
0
190
LLMエージェント時代に適応した開発フロー
Avatar for Yuya Hirayama hiragram
1
410
株式会社ARAV 採用案内
Avatar for ARAV maqui
0
350
サービスロボット最前線：ugoが挑むPhysical AI活用
Avatar for Ken Matsui kmatsuiugo
0
190

Featured

See All Featured
A better future with KSS
Avatar for Kyle Neath kneath
239
17k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
Avatar for Morgane Peng morganepeng
131
19k
We Have a Design System, Now What?
Avatar for Morgane Peng morganepeng
53
7.7k
Bash Introduction
Avatar for André Augusto Costa Santos 62gerente
614
210k
Navigating Team Friction
Avatar for Lara Hogan lara
189
15k
The Invisible Side of Design
Avatar for Vitaly Friedman smashingmag
301
51k
A designer walks into a library…
Avatar for Paul Jervis Heath pauljervisheath
207
24k
Being A Developer After 40
Avatar for Adrian Kosmaczewski akosma
90
590k
The World Runs on Bad Software
Avatar for Brandon Keepers bkeepers
PRO
70
11k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
Avatar for Eileen M. Uchitelle eileencodes
26
3k
Rails Girls Zürich Keynote
Avatar for Gregor Martynus gr2m
95
14k
Learning to Love Humans: Emotional Interface Design
Avatar for Aarron Walter aarron
273
40k

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