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

バクラクによるコーポレート業務の自動運転 #BetAIDay

PRO

1

830

【CEDEC2025】大規模言語モデルを活用したゲーム内会話パートのスクリプト作成支援への取り組み

PRO

2

770

Vision Language Modelと自動運転AIの最前線_20250730

3

1.1k

20250807_Kiroと私の反省会

0

140

【CEDEC2025】現場を理解して実現！ゲーム開発を効率化するWebサービスの開発と、利用促進のための継続的な改善

PRO

0

720

Amazon Bedrock AgentCoreのフロントエンドを探す旅 (Next.js編)

1

100

製造業の課題解決に向けた機械学習の活用と、製造業特化LLM開発への挑戦

0

150

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

4

710

風が吹けばWHOISが使えなくなる～なぜWHOIS・RDAPはサーバー証明書のメール認証に使えなくなったのか～

orangemorishita

15

5.5k

【CEDEC2025】『Shadowverse: Worlds Beyond』二度目のDCG開発でゲームをリデザインする～遊びやすさと競技性の両立～

PRO

1

290

反脆弱性(アンチフラジャイル)とデータ基盤構築

2

160

Amazon Q Developerを活用したアーキテクチャのリファクタリング

2

180

Featured

See All Featured

Improving Core Web Vitals using Speculation Rules API

sergeychernyshev

18

1k

Large-scale JavaScript Application Architecture

512

110k

Dealing with People You Can't Stand - Big Design 2015

367

26k

The World Runs on Bad Software

PRO

70

11k

Building Adaptive Systems

43

2.7k

The Power of CSS Pseudo Elements

77

5.9k

Building Better People: How to give real-time feedback that sticks.

367

19k

Practical Tips for Bootstrapping Information Extraction Pipelines

PRO

21

1.4k

ReactJS: Keep Simple. Everything can be a component!

667

120k

Fight the Zombie Pattern Library - RWD Summit 2016

234

17k

Practical Orchestrator

190

11k

What’s in a name? Adding method to the madness

productmarketing

PRO

23

3.6k

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