Making Interactive Web using Framer Motion

June 20, 2020

70

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

300

Native Mobile App with Javascript - React Native - Code Push

0

390

Bantu Asap - SS Ceria

0

150

React Native for Mobile App Development

3

510

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

0

200

Other Decks in Technology

See All in Technology

菸酒生在 LINE Taiwan 的後端雙刀流

line_developers_tw

0

1.1k

20250625 Snowflake Summit 2025活用事例レポート / Nowcast Snowflake Summit 2025 Case Study Report

1

220

Observability в PHP без боли. Олег Мифле, тимлид Altenar

0

280

白金鉱業Meetup_Vol.19_PoCはデモで語れ！顧客の本音とインサイトを引き出すソリューション構築

2

490

より良いプロダクトの開発を目指して - 情報を中心としたプロダクト開発 #phpcon #phpcon2025

1

380

Amazon ECS & AWS Fargate 運用アーキテクチャ2025 / Amazon ECS and AWS Fargate Ops Architecture 2025

16

4.6k

Welcome to the LLM Club

0

140

[TechNight #90-1] 本当に使える？ZDMの新機能を実践検証してみた

oracle4engineer

3

140

実践！ AIエージェント導入記

0

140

～宇宙最速～2025年AWS Summit レポート

1

1.4k

Snowflake Summit 2025全体振り返り / Snowflake Summit 2025 Overall Review

2

210

VCpp Link and Library - C++ breaktime 2025 Summer

0

220

Featured

See All Featured

Thoughts on Productivity

69

4.7k

Code Reviewing Like a Champion

524

40k

Build The Right Thing And Hit Your Dates

36

2.8k

Bootstrapping a Software Product

307

110k

Learning to Love Humans: Emotional Interface Design

273

40k

YesSQL, Process and Tooling at Scale

173

14k

Design and Strategy: How to Deal with People Who Don’t "Get" Design

130

19k

Optimizing for Happiness

379

70k

How to Ace a Technical Interview

277

23k

We Have a Design System, Now What?

52

7.6k

Documentation Writing (for coders)

71

4.9k

Building a Modern Day  E-commerce SEO Strategy

41

7.3k

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