Making Interactive Web using Framer Motion

June 20, 2020

94

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

320

The Story of Making Figma Plugins

4

270

UX Prototyping Tools

5

790

Clean Code in Javascript

5

520

React Native for Unified Codebase

0

320

Native Mobile App with Javascript - React Native - Code Push

0

420

Bantu Asap - SS Ceria

0

180

React Native for Mobile App Development

3

540

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

0

230

Other Decks in Technology

See All in Technology

Sansan Engineering Unit 紹介資料

PRO

1

4.9k

JavaScript 研修 (2026)

recruitengineers

PRO

0

280

AIがAPIを書く時代に、私たちは何を設計すべきか

0

210

Service Connect 上のサービスに ECS Service の外側から到達できなかった話

1

120

AIエージェントを前提としたプラットフォームエンジニアリング：GKEで作るAgent-Ready Golden Path

legalontechnologies

PRO

1

160

GitHub CopilotのFinOps- AI CreditのObservabilityと価値を生むためのエージェント設計

0

100

クラウドセキュリティ入門　～安全なクラウド利用のための基礎知識～

8

7.6k

え？フロントエンドエンジニアのワイがインフラも！？

0

270

【CEDEC2026】『ウマ娘プリティーダービー』英語版のキャラクターの方言や口調をローカライズするための創造的アプローチ

PRO

1

180

Cursor Meetup Sapporo - Cursor物語続編

0

120

[しろおび夏祭り2026] チャットするAIから、作業するAIへ - 使われ方の変化と、その裏側で起きていること

0

1.6k

[MIRU26] To What Extent Does MLLM-as-a-Judge Exhibit Cross-Model Preference Bias?

PRO

0

200

Featured

See All Featured

jQuery: Nuts, Bolts and Bling

66

8.5k

Groundhog Day: Seeking Process in Gaming for Health

0

270

Rails Girls Zürich Keynote

96

14k

A Modern Web Designer's Workflow

698

190k

The agentic SEO stack - context over prompts

0

860

Making the Leap to Tech Lead

135

10k

Applied NLP in the Age of Generative AI

PRO

4

2.4k

It's Worth the Effort

188

29k

Lessons Learnt from Crawling 1000+ Websites

PRO

1

1.5k

Making Projects Easy

120

6.7k

Fashionably flexible responsive web design (full day workshop)

408

67k

Build your cross-platform service in a week with App Engine

234

19k

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