Making Interactive Web using Framer Motion

June 20, 2020

69

Making Interactive Web using Framer Motion

Jogja JS talk, 20th June 2020

Sonny Lazuardi

June 20, 2020

Tweet

More Decks by Sonny Lazuardi

See All by Sonny Lazuardi

Artificial Intelligence & Design Plugin

0

290

The Story of Making Figma Plugins

4

240

UX Prototyping Tools

5

760

Clean Code in Javascript

5

480

React Native for Unified Codebase

0

300

Native Mobile App with Javascript - React Native - Code Push

0

390

Bantu Asap - SS Ceria

0

150

React Native for Mobile App Development

3

510

[Sidang] Layanan Basis Data Real Time NoSQL untuk Kolaborasi Web Audio Editor

0

200

Other Decks in Technology

See All in Technology

[新卒向け研修資料] テスト文字列に「うんこ」と入れるな（2025年版）

infiniteloop_inc

4

14k

フルカイテン株式会社エンジニア向け採用資料

0

5.5k

MCPが変えるAIとの協働

1

150

テストって楽しい！開発を加速させるテストの魅力 / Testing is Fun! The Fascinating of Testing to Accelerate Development

0

170

Simplify! 10 ways to reduce complexity in software development

2

240

Oracle Base Database Service 技術詳細

oracle4engineer

7

63k

問 1：以下のコンパイラを証明せよ（予告編） #kernelvm / Kernel VM Study Kansai 11th

3

480

Azure Maps Visual in PowerBIで分析しよう

0

210

AI駆動で進化する開発プロセス～クラスメソッドでの実践と成功事例～ / aidd-in-classmethod

1

1k

Новые мапы в Go. Вова Марунин, Clatch, МТС

0

2k

伝わるコードレビュー

1

100

Как мы автоматизировали интеграционное тестирование с Gonkey и не пожалели. Паша Егорычев, Кирилл Поляков

0

2.1k

Featured

See All Featured

GraphQLとの向き合い方2022年版

46

14k

Code Reviewing Like a Champion

523

40k

What's in a price? How to price your products and services

245

12k

ReactJS: Keep Simple. Everything can be a component!

667

120k

Designing for Performance

608

69k

Music & Morning Musume

47

6.5k

Into the Great Unknown - MozCon

38

1.8k

Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything

30

2.3k

The Power of CSS Pseudo Elements

75

5.8k

Optimising Largest Contentful Paint

37

3.2k

Optimizing for Happiness

378

70k

The Art of Programming - Codeland 2020

54

13k

Transcript

Framer Motion @sonnylazuardi Making Interactive Web using
Framer Motion
@sonnylazuardi
@sonnylazuardi https://mailbrew.com/mobile/
@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/
@sonnylazuardi
Color Copy Paste
https://colorcopypaste.app
None
Background Story
@sonnylazuardi How to launch a product
@sonnylazuardi Landing Page Trend
Collaboration
Idea Sketch
Figma https://www.figma.com/community/file/848833690265282057/Color-Copy-Paste-Promotional
Development Story
@sonnylazuardi Gatsby Website
@sonnylazuardi Cursor Tracking
@sonnylazuardi Color Palette Interaction https://codesandbox.io/s/framer-motion-drag-to-reorder-b7ys7
Handoff Demo
@sonnylazuardi https://handz.design
@sonnylazuardi https://codesandbox.io/s/framer-motion-handoff-jnqqg?file=/src/App.js
@sonnylazuardi https://www.framer.com/community/
Thank You @sonnylazuardi