Making Interactive Web using Framer Motion

June 20, 2020

72

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

300

The Story of Making Figma Plugins

4

250

UX Prototyping Tools

5

760

Clean Code in Javascript

5

490

React Native for Unified Codebase

0

310

Native Mobile App with Javascript - React Native - Code Push

0

390

Bantu Asap - SS Ceria

0

150

React Native for Mobile App Development

3

520

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

0

200

Other Decks in Technology

See All in Technology

AIに目を奪われすぎて、周りの困っている人間が見えなくなっていませんか？

1

430

ホリスティックテスティングの右側も大切にする〜2つの[はか]る〜 / Holistic Testing: Right Side Matters

PRO

0

580

2025新卒研修・HTML/CSS #弁護士ドットコム

3

13k

隙間時間で爆速開発！ Claude Code × Vibe Coding で作るマニュアル自動生成サービス

3

250

Claude Codeは仕様駆動の夢を見ない

13

2.3k

生成AI導入の効果を最大化するデータ活用戦略

0

110

【CEDEC2025】ブランド力アップのためのコンテンツマーケティング～ゲーム会社における情報資産の活かし方～

PRO

0

230

SRE新規立ち上げ！ Hubbleインフラのこれまでと展望

0

160

LLMでAI-OCR、実際どうなの？ / llm_ai_ocr_layerx_bet_ai_day_lt

0

430

LLM開発を支えるエヌビディアの生成AIエコシステム

acceleratedmu3n

0

370

データ基盤の管理者からGoogle Cloud全体の管理者になっていた話

PRO

0

340

Kiroでインフラ要件定義～テスト  を実施してみた

3

300

Featured

See All Featured

Principles of Awesome APIs and How to Build Them.

126

17k

"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)

229

22k

185

16k

Optimising Largest Contentful Paint

37

3.4k

Bootstrapping a Software Product

PRO

307

110k

455

43k

Navigating Team Friction

188

15k

Creating an realtime collaboration tool: Agile Flush - .NET Oxford

30

2.2k

The Power of CSS Pseudo Elements

77

5.9k

jQuery: Nuts, Bolts and Bling

63

7.8k

Designing for Performance

610

69k

The Web Performance Landscape in 2024 [PerfNow 2024]

8

750

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