English | MP4 | AVC 1920×1080 | AAC 44KHz 2ch | 70 Lessons (6h 01m) | 1.58 GB
Make type animations from scratch! Learn how to bend and mould typography for use in your own websites using P5.js.
Want to know how to work with variable fonts and how to create kinetic typographic animations for websites? If yes, this creative, go-at-your-own-pace course is for you. We’ve created a series of projects for this that are all about getting weird with type.
Across 6 hours, you’ll learn how to add variable fonts to your websites, plus how to animate and make them interactive. You’ll also work with P5.js, a Javascript library for creative coding, to bend and mould typography.
You’ll also create your very own kinetic typography animations from scratch, be able to add them to websites and make them user-interactive.
This is a great next step for students who already have some knowledge of HTML and CSS, or have completed our Foundation HTML, CSS + Javascript or [Javascript for Designers(https://www.superhi.com/courses/javascript-for-designers) courses.
What you’ll learn
- How to add variable typography to websites and change it
- How to add CSS animations and transitions to web type
- Working with P5.js within an in-browser canvas, even if you’ve never coded before
- How to think about and create your own kinetic typography animations from scratch
- How to let your users change and interact with your beautiful kinetic type animations
- How to break apart typography into its base components to rework it completely
Table of Contents
1 Welcome to the course!
2 Playground and the SuperHi Editor
3 Setting up our HTML
4 Styling our page with CSS
5 Basic web typographic styling
6 Adding a Google Font typeface to our project
7 Adding your own self-hosted typeface
8 Adding hover states
9 Stretching the typeface
10 Adding a CSS animation
11 Adding variable type to our project
12 Welcome to Caroline Wade
13 Creating our page
14 Adding in our variable font
15 Creating our first Javascript file
16 Adding variable type to Javascript
17 Welcome to 01 01
18 Setting up our P5.js script
19 Drawing text with P5
20 Preloading a font to use
21 createGraphics and copy
22 Adding a sprinkle of math to our movement
23 Welcome to aaaaaaaaa
24 Drawing text with P5
25 Styling our text
26 Adding a for loop
27 Adding a y-direction with a double for loop
28 Speed improvements with image
29 Recreating the original text
30 Adding global distortion and movement
31 Adding in local distortion
32 Homework
33 Homework solution
34 Good morning to Good Morning
35 Setting up our script
36 Cut and paste with createGraphics
37 Gridding up our graphics
38 Distortion in two directions
39 Adding a wave slider
40 Adding text field updates
41 Homework
42 Homework solution
43 Welcome to Out of Office
44 Setting up our stamp
45 Cloning twelve times
46 Changing our sample position
47 Timeline scrubbing with mouse position
48 Adding easing to our scrubbing
49 Adding in an animated loop
50 Welcome to Brutalust
51 Setting up our site
52 Adding typography to our site
53 Adding in our first Javascript content change
54 Cleaning up our script with a function
55 Substringing our content
56 Adding in an interval
57 Stopping intervals with clearInterval
58 Adding in random dots
59 Adding in random characters
60 The IntersectionObserver
61 Saving the original content with dataset
62 Adding in scroll snapping
63 Welcome to Dani Lewis
64 Setting up our project
65 Using P5’s textToPoints
66 Drawing shapes with the points
67 Adding p5 vectors
68 Adding a distance to distortion
69 Adding noise levels
70 Thank you for joining our course!
Resolve the captcha to access the links!