Making Interactive Web using Framer Motion

June 20, 2020

70

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

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

Claude Code Actionを使ったコード品質改善の取り組み

4

1.6k

初めてのAzure FunctionsをClaude Codeで作ってみた / My first Azure Functions using Claude Code

1

180

Observability в PHP без боли. Олег Мифле, тимлид Altenar

0

280

AIのAIによるAIのための出力評価と改善

0

510

AWS アーキテクチャ作図入門/aws-architecture-diagram-101

29

9.5k

Кто отправит outbox? Валентин Удальцов, автор канала Пых

0

280

AIエージェントの継続的改善のためオブザーバビリティ

6

1.4k

Model Mondays S2E02: Model Context Protocol

0

190

JSX - 歴史を振り返り、⾯⽩がって、エモくなろう

3

1.1k

BrainPadプログラミングコンテスト記念LT会2025_社内イベント&問題解説

0

160

変化する開発、進化する体系時代に適応するソフトウェアエンジニアの知識と考え方（JaSST'25 Kansai）

0

140

生成AIでwebアプリケーションを作ってみた

2

120

Featured

See All Featured

jQuery: Nuts, Bolts and Bling

63

7.8k

YesSQL, Process and Tooling at Scale

173

14k

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

8

790

StorybookのUI Testing Handbookを読んだ

30

5.8k

Thoughts on Productivity

69

4.7k

Reflections from 52 weeks, 52 projects

351

20k

30

1.1k

Gamification - CAS2011

81

5.3k

Build your cross-platform service in a week with App Engine

231

18k

Automating Front-end Workflow

1370

200k

The Psychology of Web Performance [Beyond Tellerrand 2023]

48

2.8k

A better future with KSS

239

17k

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