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

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

Reactの設計論

17

9k

Minecraft JavaのMODをSwiftで作る

0

140

Omarchy Quattro の日本語設定周り

2

170

Snowflakeのコスト最適化を支えるアーキテクチャ設計

1

1.5k

あるけみー式LTスライド作成術

1

210

クロスボーダーM&AのValue Upを支えるプロダクト開発。日米チームのハブになったプロダクトエンジニアの実践 / Product Engineering Conference 2026

0

120

AI時代、データエンジニアが一番おもろい

0

440

AIネイティブプロダクトで顧客価値を最大化するプロダクトエンジニアとFDEの協働

PRO

0

270

AI時代だからこそ、スケールしないことをやろう

1

170

コスト最適化の「めんどくさい」を AWS FinOps Agent でチョット楽にする

classmethod_kaz

0

330

AIで仕事のやり方を変える

3

1.1k

SQL文一行も書けない人事がCortexもろもろを使って人事業務を楽にしてみる

1

230

Featured

See All Featured

Why Our Code Smells

PRO

340

58k

186

16k

The Invisible Side of Design

301

52k

Chrome DevTools: State of the Union 2024 - Debugging React & Beyond

10

1.3k

We Are The Robots

0

370

Leveraging LLMs for student feedback in introductory data science courses - posit::conf(2025)

1

390

Designing Experiences People Love

143

24k

The Straight Up "How To Draw Better" Workshop

239

140k

Large-scale JavaScript Application Architecture

515

110k

コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI

63

46k

技術選定の審美眼（2025年版） / Understanding the Spiral of Technologies 2025 edition

PRO

120

120k

sira's awesome portfolio website redesign presentation

0

410

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