Making Interactive Web using Framer Motion

June 20, 2020

100

Making Interactive Web using Framer Motion

Jogja JS talk, 20th June 2020

Sonny Lazuardi

June 20, 2020

More Decks by Sonny Lazuardi

See All by Sonny Lazuardi

Artificial Intelligence & Design Plugin

0

330

The Story of Making Figma Plugins

4

280

UX Prototyping Tools

5

800

Clean Code in Javascript

5

530

React Native for Unified Codebase

0

330

Native Mobile App with Javascript - React Native - Code Push

0

420

Bantu Asap - SS Ceria

0

180

React Native for Mobile App Development

3

550

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

0

240

Other Decks in Technology

See All in Technology

リアクションエンジニア ― 小さなリアクションから、話しかけやすい組織をつくる ―

1

130

AWSを利用する上で知っておきたい名前解決の話 2026

4

3.1k

続・ソフトウェアアーキテクトのための意思決定術: Decision Readiness, Revisited — When AI Changes the Economics of Software Architecture

PRO

9

2.6k

Microsoft Entra Kerberos で実現するクラウドデバイス管理

2

610

Kiro 入門 (1 つのエージェントを、どの画面からでも) | 目指せ Kiro マスター 01

PRO

4

840

新米を「売り越さない」、Aurora DSQLで作る在庫ゼロ死守の限定ドロップEC

0

180

Building Audio Plugin Ecosystem for Android in 2026

2

150

2拠点SRE活動始めてみた | sogaoh's LT @ ホンマでっかSRE勉強会 #3

PRO

0

240

Kiro Crew 入門 (手を離しても進む仕事) | 目指せ Kiro マスター 11

PRO

3

450

【dbts2026】AIエージェントの判断と探索を変える、データベースエンジニアリング― 既存DBの処理と依存関係から作る、オペレーショナルオントロジー ―

0

200

AWS構成から考えるWebセキュリティ ― WordPressの構築経験から考える公開範囲と更新運用【JAWS FESTA 2026 in AKITA】

PRO

1

310

超⼩型・多⾔語検索モデル Bekko Embedding

1

110

Featured

See All Featured

Organizational Design Perspectives: An Ontology of Organizational Design Elements

PRO

1

880

Performance Is Good for Brains [We Love Speed 2024]

12

1.9k

Improving Core Web Vitals using Speculation Rules API

sergeychernyshev

21

1.7k

Designing Powerful Visuals for Engaging Learning

1

650

Evolving SEO for Evolving Search Engines

0

360

Docker and Python

47

4.3k

Easily Structure & Communicate Ideas using Wireframe

194

17k

90

10k

Mobile First: as difficult as doing things right

225

10k

Marketing to machines

1

6k

sira's awesome portfolio website redesign presentation

0

490

Building a Scalable Design System with Sketch

464

34k

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