Tweet
Tweet

Slide 1

Slide 1 text

Framer Motion @sonnylazuardi Making Interactive Web using

Slide 2

Slide 2 text

Framer Motion

Slide 3

Slide 3 text

@sonnylazuardi

Slide 4

Slide 4 text

@sonnylazuardi https://mailbrew.com/mobile/

Slide 5

Slide 5 text

@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/

Slide 6

Slide 6 text

@sonnylazuardi

Slide 7

Slide 7 text

Color Copy Paste

Slide 8

Slide 8 text

https://colorcopypaste.app

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

Background Story

Slide 11

Slide 11 text

@sonnylazuardi How to launch a product

Slide 12

Slide 12 text

@sonnylazuardi Landing Page Trend

Slide 13

Slide 13 text

Collaboration

Slide 14

Slide 14 text

Idea Sketch

Slide 15

Slide 15 text

Figma https://www.figma.com/community/file/848833690265282057/Color-Copy-Paste-Promotional

Slide 16

Slide 16 text

Development Story

Slide 17

Slide 17 text

@sonnylazuardi Gatsby Website

Slide 18

Slide 18 text

@sonnylazuardi Cursor Tracking

Slide 19

Slide 19 text

@sonnylazuardi Color Palette Interaction https://codesandbox.io/s/framer-motion-drag-to-reorder-b7ys7

Slide 20

Slide 20 text

Handoff Demo

Slide 21

Slide 21 text

@sonnylazuardi https://handz.design

Slide 22

Slide 22 text

@sonnylazuardi https://codesandbox.io/s/framer-motion-handoff-jnqqg?file=/src/App.js

Slide 23

Slide 23 text

@sonnylazuardi https://www.framer.com/community/

Slide 24

Slide 24 text

Thank You @sonnylazuardi