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.…
Author
Jake Ströh
Released
9/20/2013- 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
Duration
Views
-
Introduction
-
Welcome55s
-
-
1. Getting Started
-
Creating a new Hype document2m 23s
-
Working with elements3m 37s
-
-
2. Timeline Animation
-
Timing and easing animations2m 15s
-
Working with the Capo2m 3s
-
Reusing animations2m 48s
-
Masking and cropping3m 52s
-
Animating CSS filters3m 33s
-
3. Managing Timelines and Interactivity
-
Chaining actions together2m 49s
-
Working with audio3m 17s
-
Developing a slideshow7m 13s
-
4. Working with Scenes
-
Creating and managing scenes3m 18s
-
Adding scene transitions3m 28s
-
The advantages of timelines4m 12s
-
The advantages of scenes3m 5s
-
-
5. Exporting Your Project
-
Adding your own HTML1m 45s
-
Conclusion
-
Next steps33s
-
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.
Share this video
Embed this video
Video: Animating CSS filters