English | MP4 | AVC 1920×1080 | AAC 44KHz 2ch | 59 Lessons (4h 07m) | 808 MB
Motion, timings and easings: you’ll learn these techniques to create animation toys using Two.js, a Javascript tool for creating and manipulating shapes.
In this exclusive course, SuperHi have partnered up with the incredibly talented Futurefabric to design and produce a course all about creative motion with coding.
This course, aimed at beginners, will teach you how to work with motion, timings, easings and shapes to create animation toys. We’ll dive into Two.js, a Javascript tool for creating and manipulating shapes to design your own fun animations.
You don’t need any prior knowledge of how to work with code or motion to take this. View a sneak peek of the course here!
What you’ll learn
- How to think about animation toys from a non-code, motion-based standpoint
- Working with Two.js within an in-browser canvas, even if you’ve never coded before
- How to manage and manipulate multiple shapes using code
- How to manage a timeline of events and loop over your animation toy
- How to work with easings and delays to make our animations feel more natural
- How to think about self-initiated projects from an animation and motion point of view
Table of Contents
1 Welcome to Creative Coding!
2 Setting up our HTML and CSS
3 Asset folders + adding comments
4 Adding Two.js to our project
5 Setting up Two.js on our page
6 Adding a square
7 Rotating on page load
8 Adding an animation loop
9 Introduction
10 Working out geometry
11 Setting up our HTML and CSS
12 Setting up Two.js
13 Adding a for loop to add multiple shapes
14 Making our squares into a circle
15 Rotating our shapes
16 Group our shapes together
17 Variation 2: Stick version
18 Variation 3: Grow and shrink scale
19 Easing fun time!
20 Project setup + utils.js
21 Adding our squares
22 What is modulo?
23 Applying different fills using modulo
24 Making and looping a timeline
25 Adding easing to our movements
26 Making individual timelines
27 Variation 2: switching ordering
28 Variation 3: using modulo to change rotations
29 Welcome to Zipper
30 Project setup
31 Adding a linear animation
32 Non-linear easing
33 Making individual timelines
34 Splitting our timeline in two
35 Variation B: Translation
36 Variation C: Mouse control
37 Variation D: Scroll control
38 Intro to random positions!
39 Setting up a line of squares
40 Setting up a general timeline
41 Setting up shape data
42 Adding rotation to our data
43 Reversing the timeline
44 Adding easing
45 Adding delays to our timeline
46 Variation B: scaling
47 Variation C: into a circle
48 Variation D: reset the randomness on loop
49 Variation E: Change colors on click
50 Welcome to the Moiré effect
51 Setting up our rectangles
52 Animating our shapes
53 Setting up our four-part sequence
54 Changing our width with our sequences
55 Adding per-sequence rotation
56 Altering our rotations
57 Adding a per-sequence easing
58 Adding delays to each sequence
59 Thank you for watching this course!
Resolve the captcha to access the links!