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

BtoBプロダクト開発の深層

0

310

Function calling機能をPLaMo2に実装するには / PFN LLMセミナー

PRO

0

920

AWSにおけるTrend Vision Oneの効果について

0

130

動画データのポテンシャルを引き出す！ Databricks と AI活用への奮闘記（現在進行形）

databricksjapan

0

140

SOC2取得の全体像

shonansurvivors

1

380

How to achieve interoperable digital identity across Asian countries

0

120

Goに育てられ開発者向けセキュリティ事業を立ち上げた僕が今向き合う、AI × セキュリティの最前線 / Go Conference 2025

0

350

10年の共創が示す、これからの開発者と企業の関係～ Crossroad

PRO

1

190

AIが書いたコードをAIが検証する！自律的なモバイルアプリ開発の実現

1

340

Modern_Data_Stack最新動向クイズ_買収_AI_激動の2025年_.pdf

0

200

多様な事業ドメインのクリエイターへ価値を届けるための営みについて

0

110

Oracle Base Database Service 技術詳細

oracle4engineer

PRO

11

77k

Featured

See All Featured

The Illustrated Children's Guide to Kubernetes

48

51k

PRO

29

5.5k

32

15k

Reflections from 52 weeks, 52 projects

352

21k

A Modern Web Designer's Workflow

697

190k

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

232

18k

Optimising Largest Contentful Paint

37

3.4k

Product Roadmaps are Hard

PRO

54

11k

148

16k

Keith and Marios Guide to Fast Websites

411

22k

The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024

26

3.1k

10 Git Anti Patterns You Should be Aware of

PRO

657

61k

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