Making Interactive Web using Framer Motion

June 20, 2020

74

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

770

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

フルカイテン株式会社エンジニア向け採用資料

0

8.8k

「Linux」という言葉が指すもの

PRO

4

140

複数サービスを支えるマルチテナント型Batch MLプラットフォーム

PRO

1

570

はじめてのOSS開発からみえたGo言語の強み

1

380

企業の生成AIガバナンスにおけるエージェントとセキュリティ

PRO

2

190

oracle4engineer

PRO

0

100

新規プロダクトでプロトタイプから正式リリースまでNext.jsで開発したリアル

1

140

Snowflake Intelligenceにはこうやって立ち向かう！クラシルが考えるAI Readyなデータ基盤と活用のためのDataOps

0

260

ハードウェアとソフトウェアをつなぐ全てを内製している企業の E2E テストの作り方 / How to create E2E tests for a company that builds everything connecting hardware and software in-house

PRO

1

150

CDK CLIで使ってたあの機能、CDK Toolkit Libraryではどうやるの？

4

190

JTCにおける内製×スクラム開発への挑戦〜内製化率95%達成の舞台裏/JTC's challenge of in-house development with Scrum

0

230

AI開発ツールCreateがAnythingになったよ

0

130

Featured

See All Featured

Why You Should Never Use an ORM

PRO

59

9.5k

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

52

5.6k

Designing for Performance

610

69k

Build The Right Thing And Hit Your Dates

37

2.9k

Fashionably flexible responsive web design (full day workshop)

407

66k

CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again

162

15k

Rails Girls Zürich Keynote

95

14k

A better future with KSS

239

17k

[RailsConf 2023 Opening Keynote] The Magic of Rails

30

9.7k

Faster Mobile Websites

309

31k

Improving Core Web Vitals using Speculation Rules API

sergeychernyshev

18

1.1k

Evolution of real-time – Irina Nazarova, EuRuKo, 2024

8

920

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