Making Interactive Web using Framer Motion

June 20, 2020

89

Making Interactive Web using Framer Motion

Jogja JS talk, 20th June 2020

Sonny Lazuardi

June 20, 2020

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

790

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

170

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

独断と偏見で試してみる、シングル or マルチエージェントどっちがいいの？

1

130

Do Ruby::Box dream of Modular Monolith?

1

350

マルチプロダクトの信頼性を効率良く保っていくために

PRO

0

170

AI時代における技術的負債への取り組み

1

1.7k

国内外の生成AIセキュリティの最新動向 & AIガードレール製品「chakoshi」のご紹介 / Latest Trends in Generative AI Security (Domestic & International) & Introduction to AI Guardrail Product "chakoshi"

4

1.4k

Revisiting [CLS] and Patch Token Interaction in Vision Transformers

0

400

実践ハーネスエンジニアリング：TAKTで実現するAIエージェント制御 / Practical Harness Engineering: AI Agent Control Enabled by TAKT

13

4.9k

AI バイブコーティングでキーボード不要？！

0

620

音声言語モデル手法に関する発表の紹介

0

130

Do Vibe Coding ao LLM em Produção para Busca Agêntica - TDC 2026 - Summit IA - São Paulo

3

150

AgentCore Managed Harness を使ってみよう

2

230

弁護士ドットコム株式会社エンジニア職向け会社紹介資料

1

180

Featured

See All Featured

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

162

16k

世界の人気アプリ100個を分析して見えたペイウォール設計の心得

PRO

69

39k

The Illustrated Children's Guide to Kubernetes

51

52k

Making the Leap to Tech Lead

135

9.8k

Easily Structure & Communicate Ideas using Wireframe

194

17k

Bridging the Design Gap: How Collaborative Modelling removes blockers to flow between stakeholders and teams @FastFlow conf

0

520

Balancing Empowerment & Direction

6

1.1k

Evolving SEO for Evolving Search Engines

0

180

Context Engineering - Making Every Token Count

9

840

Dealing with People You Can't Stand - Big Design 2015

367

27k

A Guide to Academic Writing Using Generative AI - A Workshop

PRO

1

280

Pawsitive SEO: Lessons from My Dog (and Many Mistakes) on Thriving as a Consultant in the Age of AI

0

120

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