English | MP4 | AVC 1920×1080 | AAC 44KHz 2ch | 111 Lessons (11h 56m) | 2.98 GB
Take full control of web graphics and give your site interactions a bit of flourish with movement and animation.
In this go-at-your-own-pace course, SuperHi has designed and produced a series of projects all about hand-coding, styling, and animating SVGs to bring scalable, performance-friendly illustrations to life in the browser.
The course includes 8+ hours of video lessons that will teach you how to handcraft animations with CSS, SVG, Javascript and GreenSock.
You’ll learn how to craft drawings with code in Figma and then animate their motion and styling with both CSS animations and the industry standard GreenSock Animation API (GSAP).
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 course.
What you’ll learn
- How to craft SVGs and SVG animations by hand.
- How to use CSS and GreenSock to animate shapes and paths.
- Create and apply special effects such as patterns and clip paths.
- How to set up timelines, sequences, and click events.
- How to make our animations feel more natural with easings and delays.
- How to start self-initiated projects working with illustrations and UI animation.
Table of Contents
1 Welcome to Seamstress
2 The SuperHi Editor
3 Basic structure and styling
4 Laying out the page
5 Adding typography using web fonts
6 Adding multiple images to our site
7 Adding Javascript to the site
8 Setting up a slideshow
9 Adding multiple slideshows
10 Fade in our headers with GSAP
11 Creating a carousel effect
12 Tidying up our carousel
13 Adding our intro slides effect
14 Creating a timeline for next slides
15 Mobile friendly design
16 Adding hover effects to our Read More buttons
17 Waiting for images to load with imagesLoaded
18 Variations on GSAP
19 Welcome to the project!
20 Let’s set up our page
21 Adding a layout
22 What are CSS keyframes and CSS animations?
23 Adding looping and repeating animations
24 How to apply easing to CSS animation
25 Making an SVG image from scratch
26 Applying CSS to SVG tags
27 SVG viewbox and preserveAspectRatio
28 Hover states with SVG
29 Making our lives easier with exporting SVGs from Figma
30 Fill screen and blend modes
31 Using CSS animations with SVG tags
32 Adding a CSS filter
33 Using Javascript for fade out the header on scroll
34 Adding Javascript easing
35 Tying scroll events to our blobs
36 Changing the blob scale per section
37 Adding multiple blobs per section
38 Custom CSS scrollbar
39 Homework: Fade out the arrow on scroll
40 Homework solution
41 Welcome to 4th Kind!
42 Let’s set up our page
43 Adding our typography and links
44 Adding dark mode with a media query
45 CSS Variables for themeing
46 Updating our dark mode
47 User-triggered dark mode
48 Adding our navigation
49 Toggling our navigation
50 Adding raw SVGs to our site
51 Adding a menu icon animation
52 Dark mode toggle animation
53 Adding a triple-nav animation
54 Dark mode wiper effect
55 Adding our central animation
56 Shifting our site on menu open
57 The MorphSVG plugin
58 Welcome home to Home Planet
59 Setting up our header
60 What are SVG ids
61 Eyeball movements
62 Adding a hat timeline
63 Moving the left and right arms
64 Setting up our house animation
65 Adding the raw SVG to the house
66 Making the TV flicker with a timeline
67 Adding links to our SVG
68 Adding a label to our links
69 Updating the text on hover
70 Fading the other links on hover
71 Setting up a story timeline
72 Adding our scene
73 Adding parallax to our scroll
74 Combing our timelines
75 Making the timeline be based on scroll
76 Making the site have responsive design
77 Welcome to Seal Street Photo Studio!
78 Setting up our page content and style
79 Sticky positioning
80 What is an Intersection Observer
81 Applying styling to our observer
82 prefers-reduced-motion Media Query
83 Scroll-jacking with CSS Scroll Snap
84 Adding our captions
85 CSS clip path
86 Variation: Adding clip-path to CSS animation
87 Adding typography and layers
88 Adding a rotation layer
89 Changing rotation on mousemove
90 Adding a media query for reduced motiono
91 Setting up our intro sequence
92 Animating our inbox box
93 Adding fixes and optimizations
94 Welcome to Wakefast
95 Setting up our page
96 Starting a smooth scroll
97 Moving CSS into Javascript
98 Replicating a normal page scroll
99 Adding a tween factor
100 Adding media queries to our Javascript
101 Fade in fruits
102 Aspect ratios and layering images
103 Adding a parallax scroll effect to our fruits
104 Faking a cursor
105 Tweening the cursor position
106 Adding a slower trail cursor
107 Adding rotation to our cursor
108 Animating underlines on links
109 Adding image underlines with clip-path
110 Adding a media query addListener
111 Thank you for taking our course!
Resolve the captcha to access the links!