Making Interactive Web using Framer Motion

June 20, 2020

71

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

510

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

0

200

Other Decks in Technology

See All in Technology

ソフトウェアQAがハードウェアの人になったの

3

220

Autify Company Deck

2

44k

VS CodeとGitHub Copilotで爆速開発！アップデートの波に乗るおさらい会 / Rapid Development with VS Code and GitHub Copilot: Catch the Latest Wave

3

480

【あのMCPって、どんな処理してるの？】 AWS CDKでの開発で便利なAWS MCP Servers特集

6

980

ロールが細分化された組織でSREは何をするか？

1

430

ClaudeCodeにキレない技術

1

870

ビジネス職が分析も担う事業部制組織でのデータ活用の仕組みづくり / Enabling Data Analytics in Business-Led Divisional Organizations

1

400

セキュアなAI活用のためのLiteLLMの可能性

1

360

Delegating the chores of authenticating users to Keycloak

0

190

All About Sansan – for New Global Engineers

1

1.2k

「現場で活躍するAIエージェント」を実現するチームと開発プロセス

4

520

研究開発部メンバーの働き⽅ / Sansan R&D Profile

3

18k

Featured

See All Featured

Fashionably flexible responsive web design (full day workshop)

407

66k

Being A Developer After 40

90

590k

Gamification - CAS2011

81

5.4k

Writing Fast Ruby

628

62k

Designing for Performance

610

69k

Fantastic passwords and where to find them - at NoRuKo

51

3.3k

Practical Orchestrator

189

11k

Agile that works and the tools we love

329

21k

実際に使うSQLの書き方徹底解説 / pgcon21j-tutorial

181

54k

Building a Modern Day  E-commerce SEO Strategy

42

7.4k

Rails Girls Zürich Keynote

95

14k

How to Ace a Technical Interview

278

23k

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