Join Jake Ströh for an in-depth discussion in this video Animating other properties, part of Hype Quick Start.
Up to this point, we've explored movement,…opacity and rotation properties as well as easing.…Now I'd like to show you some of the other properties that we can animate in Hype.…So let's start off by inserting a rectangle element onto…the scene and then placing it off to the left side.…Next I'm going to record enable the scene.…Go to three seconds on the timeline, and move the square off to the right.…So this is very common.…We've done this before.…We've animated something from one point to another.…With the play head at three seconds, I'm going to go to the elements inspector.…
And with record enabled, I want to have…the square transform into a circle over time.…To do that I will go to the radius settings in boarder Input 90 pixels.…You'll notice immediately down in the properties we have some…new properties that have been effected by the setting change.…Border radiuses bottom left and right and border radiuses top left and right.…And when we jump back to the beginning of the scene and select…Play to preview, you'll notice that the square has now transformed into a circle.…
- 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
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.