Making Interactive Web using Framer Motion

June 20, 2020

82

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

780

Clean Code in Javascript

5

500

React Native for Unified Codebase

0

310

Native Mobile App with Javascript - React Native - Code Push

0

400

Bantu Asap - SS Ceria

0

160

React Native for Mobile App Development

3

530

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

0

210

Other Decks in Technology

See All in Technology

I tried making a solo advent calendar!

0

130

Introduction to Bill One Development Engineer

PRO

0

340

あの夜、私たちは「人間」に戻った。 ── 災害ユートピア、贈与、そしてアジャイルの再構築 / 20260108 Hiromitsu Akiba

PRO

0

410

研究開発部メンバーの働き⽅ / Sansan R&D Profile

PRO

4

21k

Agentic AIが変革するAWSの開発・運用・セキュリティ～Frontier Agentsを試してみた～ / Agentic AI transforms AWS development, operations, and security I tried Frontier Agents

0

210

Oracle Database@Azure：サービス概要のご紹介

oracle4engineer

PRO

3

260

First-Principles-of-Scrum

3

1.3k

2025-12-27 Claude CodeでPRレビュー対応を効率化する@機械学習社会実装勉強会第54回

4

1.4k

迷わない！AI×MCP連携のリファレンスアーキテクチャ完全ガイド

0

220

Digitization部紹介資料

PRO

1

6.4k

1

340

Node vs Deno vs Bun 〜推しランタイムを見つけよう〜

1

220

Featured

See All Featured

How to Align SEO within the Product Triangle To Get  Buy-In & Support - #RIMC

1

1.4k

PRO

0

450

The Illustrated Guide to Node.js - THAT Conference 2024

0

220

Ten Tips & Tricks for a 🌱 transition

0

47

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

9

1k

Impact Scores and Hybrid Strategies: The future of link building

tamaranovitovic

0

180

Stop Working from a Prison Cell

273

21k

How to Think Like a Performance Engineer

28

2.4k

Sharpening the Axe: The Primacy of Toolmaking

46

2.6k

The Art of Delivering Value - GDevCon NA Keynote

16

1.8k

Utilizing Notion as your number one productivity tool

2

190

Making the Leap to Tech Lead

135

9.7k

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