100 Web Challenges

Web Animation and Interaction project

As an enthusiast of Web design and development, I started my web Front-end 100 challenges in this summer. Inspired by Matthias Martin, a web designer, I started to rebounded and design different web components and experimented with different transition and animation. I considered different mouse events and applied either CSS or SVG animation. Currently, I'm using Pug as HTML Preprocessor, SCSS/SASS for CSS and javascript/jQuery for interaction. Some javascript framework, like React.js , will be added soon. This challenge is still ongoing and I will update the latest design and code via Codepen.

Date: 2018
My Role: Front-end development
Category: Individual Project
1

See the Pen Web Animation 100 -1 by Yu Cheng Chang (@yuchengchang) on CodePen.

2

See the Pen Web 100 - 2 by Yu Cheng Chang (@yuchengchang) on CodePen.

3

See the Pen Web Animation 100 - 3 by Yu Cheng Chang (@yuchengchang) on CodePen.

4

See the Pen Web Animation 100 - 4 by Yu Cheng Chang (@yuchengchang) on CodePen.

5

See the Pen Web Animation 100 - 5 by Yu Cheng Chang (@yuchengchang) on CodePen.

6

See the Pen Web Animation 100 - 6 by Yu Cheng Chang (@yuchengchang) on CodePen.

7

See the Pen Web Animation 100 - 7 by Yu Cheng Chang (@yuchengchang) on CodePen.

8

See the Pen Web animation 100 - 8 by Yu Cheng Chang (@yuchengchang) on CodePen.

9

See the Pen Web Animation 100 -9 by Yu Cheng Chang (@yuchengchang) on CodePen.

10

See the Pen Web animation 100 -10 by Yu Cheng Chang (@yuchengchang) on CodePen.

11

See the Pen Web animation 100 - 11 by Yu Cheng Chang (@yuchengchang) on CodePen.

12

See the Pen Web animation 100 - 12 by Yu Cheng Chang (@yuchengchang) on CodePen.

13

See the Pen Web animation 100 -13 by Yu Cheng Chang (@yuchengchang) on CodePen.

14

See the Pen Web animation 100 -14 by Yu Cheng Chang (@yuchengchang) on CodePen.

15

See the Pen Web animation 100 -15 by Yu Cheng Chang (@yuchengchang) on CodePen.

16

See the Pen Web animation 100 - 16 by Yu Cheng Chang (@yuchengchang) on CodePen.