Making Interactive Web using Framer Motion

June 20, 2020

83

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

SREが向き合う大規模リアーキテクチャ〜信頼性とアジリティの両立〜

0

440

Frontier Agents (Kiro autonomous agent / AWS Security Agent / AWS DevOps Agent) の紹介

3

170

クレジットカード決済基盤を支えるSRE - 厳格な監査とSRE運用の両立 (SRE Kaigi 2026)

6

2.7k

こんなところでも（地味に）活躍するImage Modeさんを知ってるかい？- Image Mode for OpenShift -

0

130

Claude_CodeでSEOを最適化する_AI_Ops_Community_Vol.2__マーケティングx_AIはここまで進化した.pdf

2

550

Context Engineeringが企業で不可欠になる理由

PRO

3

560

~Everything as Codeを諦めない~ 後からCDK

3

330

Amazon S3 Vectorsを使って資格勉強用AIエージェントを構築してみた

3

450

Greatest Disaster Hits in Web Performance

0

210

今日から始めるAmazon Bedrock AgentCore

4

400

Oracle Cloud Observability and Management Platform - OCI 運用監視サービス概要 -

oracle4engineer

PRO

2

14k

[CV勉強会@関東 World Model 読み会] Orbis: Overcoming Challenges of Long-Horizon Prediction in Driving World Models (Mousakhan+, NeurIPS 2025)

0

130

Featured

See All Featured

WENDY [Excerpt]

9

36k

How to Think Like a Performance Engineer

28

2.4k

The Limits of Empathy - UXLibs8

1

210

Designing for Performance

610

70k

PRO

34

15k

How To Speak Unicorn (iThemes Webinar)

1

380

Test your architecture with Archunit

1

2.1k

Java REST API Framework Comparison - PWX 2021

34

9.1k

職位にかかわらず全員がリーダーシップを発揮するチーム作り / Building a team where everyone can demonstrate leadership regardless of position

57

50k

Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything

31

2.7k

Technical Leadership for Architectural Decision Making

1

240

Code Review Best Practice

74

20k

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