Animating type: Digital flip sign

- Here's another type effect I like a lot, I call it a digital flip sign. It's kind of like those old signs that you used to see in ferry terminals or railroad stations. Let's take a look. Let me show you in the Preview panel. See how the numebrs flip, flip, flip? And then at the end we just have the hand flying in to finish things off. But what I want to talk about is how we get these numbers to flip. I'm gonna go to the second page of this file where I've left the first set of numbers animated, but I want to show you how we animate the second set of numbers, the 10 to 9 years.

Each of these is actually a stack of numbers. Let's start with the 10 years group. If we look at the Layers panel we can see they go down in order, 10, 9, 8, 7, 6. I want to animate them all the same. And I want them to animate in a very specific order, from 10 going down, so I'm gonna select them in that order. I'll use the Layers panel, since they're stacked on top of each other. So I'll hold down the shift key, and select each one. Now I'm gonna apply the preset Appear.

I'll reduce the duration to the smallest amount possible, .125 second. And I'm gonna change the opacity from the preset opacity, which will prevent the animation from showing at all, with such a short duration. I'm going to change it to Fade In. And finally, as each number appears after it animates, I want it to go away. So we'll see 10, then 9, then 8, and so forth. I'm gonna do the same thing to the stack with the 9 on top. I'll hold down the shift key and select each one in order in the Layers panel.

I'll apply the preset Appear, set the duration down, change the opacity to a simple Fade In, and set them to Hide After Animating. Let's preview this and see what we've got. Looks good, but there are just a couple of problems. For one thing, like the top example, which I left animated, the last number here should show. And they've been set to hide after animating, so I need to fix that.

The other thing is, these numbers were running together. So we'll deal with that too, but in the Timing panel. First I'm gonna select the bottom most object in each stack. In the case of my 9 year stack, I'll click on the number 5. And I'm gonna turn off Hide After Animating because I want it to stay visible after it's done flipping. On the 10 year stack I'll select the bottom number, also, and turn off Hide After Animating. Let's take a look and make sure that works properly before we work on our Timing panel issues.

Great. That's just what we want. It's just that we want them to play simultaneously. So now we'll go to the Timing panel, and you'll notice in the 10 number stack I added the letter A, to help me differentiate those numbers from the numbers in the other stack. Remember, naming the items in your animations are really important to keep track of things, especially in the Timing panel. So now I'm going to link these numbers. I want to link 10 with 9, so I'm gonna hold down the command or control key, and select them both and then link them.

When I link them, even though they weren't listed together in the Timing panel, they move next to each other in the link. I'll select 9, and 8, and link them, 8, and 7, I want those to play together, 7 and 6, and link those, and finally, 6 and 5. There, let's see if we got the timing right. Our first stack animates, perfect, that's exactly what we wanted, our digital flip sign.

You can see in this example how important the Layers panel is, and how we can use it to select items in the order that we want to animate. Throw in a little simple Appear, and set things up properly in your Timing panel, and you've got a digital flip sign.