Making Interactive Web using Framer Motion

June 20, 2020

86

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

310

The Story of Making Figma Plugins

4

260

UX Prototyping Tools

5

780

Clean Code in Javascript

5

510

React Native for Unified Codebase

0

320

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

220

Other Decks in Technology

See All in Technology

なぜAIは組織を速くしないのか令和の腑分け

80

50k

Sansan Engineering Unit 紹介資料

PRO

1

4k

Secure Boot 2026 - Aggiornamento dei certificati UEFI e piano di adozione in azienda

0

120

LLM活用の壁を超える：リクルートR&Dの戦略と打ち手

recruitengineers

PRO

1

170

Databricksアシスタントが自分で考えて動く時代に! エージェントモード体験もくもく会

0

210

AIエンジニア Devin と歩む、自律型運用プロセスの構築

0

350

Microsoft Fabric のワークスペースと容量の設計原則

2

210

論文検索を日本語でできるアプリを作ってみた

0

140

2026年のAIエージェント構築はどうなる？

12

2.9k

パネルディスカッション資料 (at Tableau Now! - 2026-02-26)

yoshitakaarakawa

0

760

Serverless Agent Architecture on Azure / serverless-agent-on-azure

1

110

Claude Codeと駆け抜ける情報収集と実践録

2

1.2k

Featured

See All Featured

How People are Using Generative and Agentic AI to Supercharge Their Products, Projects, Services and Value Streams Today

1

130

Self-Hosted WebAssembly Runtime for Runtime-Neutral Checkpoint/Restore in Edge–Cloud Continuum

0

380

Keith and Marios Guide to Fast Websites

413

23k

Optimising Largest Contentful Paint

37

3.6k

4 Signs Your Business is Dying

187

22k

Six Lessons from altMBA

29

4.2k

We Have a Design System, Now What?

55

8k

How to Get Subject Matter Experts Bought In and Actively Contributing to SEO & PR Initiatives.

0

77

Let's Do A Bunch of Simple Stuff to Make Websites Faster

508

140k

Data-driven link building: lessons from a $708K investment (BrightonSEO talk)

1

940

JavaScript: Past, Present, and Future - NDC Porto 2020

52

5.9k

sira's awesome portfolio website redesign presentation

0

170

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