Join Jake Ströh for an in-depth discussion in this video Animating CSS filters, part of Hype Quick Start.
Something that's really cool and relatively new in…Hype is the ability to animate CSS3 filters.…Open up cssFilters-start, and you will see that we will be…animating the filter effects for hue,…saturation, blur, sepia, brightness, and contrast.…Like everything else we've animated, the Record button…comes in very handy, as well as the…(UNKNOWN).…So let's begin animating the mentioned CSS filters.…We will animate each filter with a one second up and…a one second out that demonstrates the parameters of each filter.…
So let's start by selecting the hue image, record…enabling our scene, going to one second on the timeline.…And then dialing the hue effect up to 360 degrees.…Next, we'll place the timeline at two seconds and grab the Cable tool and slide…that to one second, and bring the hue effect back down to zero.…We'll jump to the beginning and them press Play to see the effect take place.…It works.…So let's move on and do the remaining effects.…Let's record enable the scene.…Grab the…(UNKNOWN)…tool.…
Bring it to two seconds and then place the play head at three seconds.…
- Creating your first Hype animation
- Understanding the main timeline
- Animating with keyframes
- Modifying keyframes and retiming
- Working with the Capo tool
- Reusing animations
- Masking and cropping
- Animating CSS filters
- Creating buttons and working with mouse actions
- Chaining actions together
- Developing a slideshow
- Creating and managing scenes
- Exporting and embedding Hype documents
Skill Level Beginner
Motion: Principles of Motion Graphicswith Ian Robinson3h 43m Intermediate
1. Getting Started
2. Timeline Animation
3. Managing Timelines and Interactivity
4. Working with Scenes
5. Exporting Your Project
Adding your own HTML1m 45s
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.