Join Chris Converse for an in-depth discussion in this video Combining multiple animation properties, part of Design the Web: Illustrator to Animated HTML5 Canvas.
Now we're going to animate the teaser text in the center, and we're gonna use rotation for this as well, but we're gonna use rotation and alpha. We're also going to use a more advanced technique for changing the origin point. So let's come down here and find the layer called time for a cup of. I'm gonna lock all the other layers. Let's come in here and rename this to teaser. Add a parenthesis and a semicolon. So let's first come in here and set the rotate dash direction colon. We're going to set this to clockwise so it animates against the background swirl.
Then a semicolon, then a space, let's set the iteration for rotate. So rotate-iterations: 1; and then let's set the duration. So I'll set rotation-duration to three seconds. Let's hit return. And now we need to set an origin point, but we don't want this to rotate from the upper left hand corner like the swirl we had before, so let's come in here and set origin: colon.
Now instead of typing center we're going to type in .5, .5. Center is a shortcut for setting the x and y position of the origin point to 50 percent, which gives us an origin point in the center. We'll talk more about that in a moment. So with that in place, let's export this, and now in the browser we see we have one rotation of that teaser text, rotating around its center point. Now the effect that I want for the teaser text is I want it to look like the text is moving along the path that the type is set on.
So what we've done so far is created an object for that teaser element, but what we need to do is adjust the origin point. So by default, the origin is based on the overall bounding box, and the default position for the origin is the top left hand corner. So when we add the origin property, we have the ability to add the x and y position, and these values are based on percentages, so if we set a .5 for the x, that's going to be 50 percent of the x-axis, which will move the origin point to this location here. Now to get this object to rotate around a point that will look like it's moving along this arc, we're gonna need to set the y position to greater than the bounding box or greater than 100 percent.
So if we set this to 1.1, this is going to set the origin point of the y-axis to 110 percent, which is gonna position the origin point approximately here. The circumference that that object's gonna rotate around is going to match the arc that we set the type on, and it's gonna give us the illusion that the type is moving along the path that it's set on. So let's close our browser preview. Let's go back to Illustrator. Let's come down here to our teaser layer, and let's come down and change the origin. So we have .5 for the x, which is what we want.
Let's come in here and change the y property to 1.1 which is 110 percent. Let's re-export this, and now in the browser, the teaser text looks as though it's animating along the path that the type is set on. So now that the rotation point is where I want it, let's close the browser, let's go back to Illustrator. Let's add a second property on that of alpha. So we're gonna go back to the teaser layer. After the 110 percent for the x property of origin, let's hit a semicolon and a space.
Now let's type in alpha-direction: fade-in; Next we'll set the alpha duration to two seconds, semicolon, space, and then we'll set alpha iterations to one. Once that's in place, let's hit return. We'll export this again, and now we'll see that the teaser text now fades up while it rotates around its origin point. Now at this point there's two adjustments that I wanna make. First, I don't want to see that much of the rotation of the teaser text and two, I don't want the teaser text to stop abruptly at the end.
So we're gonna add both an easing effect and a delay on the alpha. So back to Illustrator. Back to our teaser layer. After our iterations, let's add a semicolon, then a space. First we're gonna add the easing effect. And there's a whole series of easing scripts that are built into the plugin, and they're called timing functions. So we're gonna type rotate-timing-function: and the one I wanna use is quadratic ease out, so that's q-u-a-d, ease with a capital E, out with a capital O.
Add a semicolon, and now we're gonna set just one more property. alpha-delay to 1.5 seconds. So with this delay we're not gonna see the first part of the rotation. We're only gonna see the final part of the rotation as the type fades in. Hit return to save your layer name changes. Let's export this again. And now in the browser we can see that we only see the final part of the rotation for that teaser text. And now with that in place, next we're gonna add a scaling effect to the coffee cup.