Making Interactive Web using Framer Motion

June 20, 2020

69

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

290

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

Redmineの意外と知らない便利機能（Redmine 6.0対応版）

0

1.2k

データ戦略部門紹介資料

1

3.1k

テストを実施する前に考えるべきテストの話 / Thinking About Testing Before You Test

14

2k

Scale Security Programs with Scorecarding

0

430

うちの会社の評判は？SNSの投稿分析にAIを使ってみた

0

160

MCP で繋ぐ Figma とデザインシステム〜LLM を使った UI 実装のリアル〜

2

1.3k

AIの電力問題を概観する

1

210

Machine Intelligence for Vision, Language, and Actions

0

490

AIのための オンボーディングドキュメントを整備する - hirotea

9

2.3k

令和最新版TypeScriptでのnpmパッケージ開発

0

110

AIコードエディタは開発を変えるか？Cursorをチームに導入して1ヶ月経った本音

1

700

libsyncrpcってなに？

0

150

Featured

See All Featured

A Tale of Four Properties

159

23k

Improving Core Web Vitals using Speculation Rules API

sergeychernyshev

15

890

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

160

15k

Chrome DevTools: State of the Union 2024 - Debugging React & Beyond

6

660

Raft: Consensus for Rubyists

137

7k

Music & Morning Musume

47

6.6k

Fashionably flexible responsive web design (full day workshop)

407

66k

[RailsConf 2023] Rails as a piece of cake

55

5.6k

Fontdeck: Realign not Redesign

paulrobertlloyd

84

5.5k

The Straight Up "How To Draw Better" Workshop

233

140k

Rails Girls Zürich Keynote

94

13k

GraphQLの誤解/rethinking-graphql

71

11k

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