Join Chris Converse for an in-depth discussion in this video Animating with the Toggle Pin, part of Edge Animate Essential Training.
- In the previous lesson, we created a really simple animation by moving our playhead in the Timeline back and forth, and adding keyframes for specific points. There's a really unique tool inside of Edge Animate called the Toggle Pin. What this does is allow us to basically work in the future while animating on the current frame. To demonstrate this, we'll come down into the Timeline panel, we're gonna turn on Auto Keyframe and Auto Transition, and we're also gonna turn on the Toggle Pin. Now if I had these other two settings turned off and I still activated the Toggle Pin, it will turn these on. What the Toggle Pin does, again, is allow us to sort of work in the future.
Typically in animation, we work backwards. We have the ending composition, which is what we see here, and then we work backwards to create the animation. So what we're gonna do here is come down to the Toggle Pin, we're gonna grab the little blue dot at the top, and we're gonna drag the blue dot out to the two-second mark. Now, the playhead is still sitting at the zero marker, but the Toggle Pin is now sitting at two seconds. Basically what's gonna happen is any changes that we make are now going to affect the animation at the zero marker, and we're going to end up with, at the two-second mark, what we currently see on the screen.
So with that in place, let's come down to the sugar cube. Let's select this layer. So with the sugar cube selected, I'll come over to the Properties panel and I'll just scrub the y-axis up to negative 34. Now, I'm not activating keyframes, I'm simply moving that position. Now, notice in the Timeline, I now have an animation that goes from negative 32 pixels, down here on the top property, to 212. If I grab the playhead and drag this back and forth, Edge Animate has created an animation for me. It's activated the keyframes on the zero marker and keyframes at the two-second mark, and if I jog the playhead out to the two-second mark, you'll see that the sugar cube is now sitting exactly where it was sitting when we were at the zero time.
Now I still have the Toggle Pin active, the playhead is at the zero-marker. I'm gonna come up here and select the coffee cup, hold the Shift key, and I'm gonna drag this off to the right-hand side of the screen. And once I complete that action, I now get two keyframes for the coffee cup as well. So now I'll come up here, I'll hit Play, and now we can see we have an animation by simply making two changes: moving the sugar cube up and moving the coffee cup over to the side. So the Toggle Pin gives us a way that we can work with our animation in the final state, and then it will work in reverse to create the initial states of all of the animated elements, so that the animation will resolve with exactly the composition we started with.
Now, the Toggle Pin can also be used in reverse as well. I'm going to come down here to the lower right side of the Timeline panel. Gonna change the scale so I can see more time. Just move this down a little bit. We're gonna grab the playhead, gonna double-click twice to activate the Toggle Pin, and what we're gonna do instead is I'm gonna grab the yellow and I'm gonna move the ending state out to the four-second mark. Now, you'll notice that the Toggle Pin now shows us yellow here, which means it's going to be working in reverse. So now what I'm doing is I'm starting from this point here, even though we're looking at the four-second mark in the future.
Now with this here, what I wanna do is basically set the animation up in reverse. So again, I'm working at the four-second mark but Edge Animate's going to add these settings to begin at the two-second mark. So I'll come up to the stage, I'll grab the cup and I'll just move this back off the stage, and we'll grab the sugar cube, hold the Shift key, and I'll just move this off the stage to the top. So now we have our initial animation, where the cube drops and the cup moves into place, and then when it's done, the cup will then move off the stage and the sugar cube will move back to the top. I'll turn off the Toggle Pin. Let's come over here and preview the animation.
Now, when you start playing with the Toggle Pin, it might be a little confusing at first. It's a really sorta different idea to work with animations where you're looking at the ending result but the animations are actually happening in an opposite direction. But once you get the hang of it, you can see how quickly we can start to create animations, and how you can start with your ending composition and not have to work backwards to create the animations.
- Creating a new project
- Preparing content in Photoshop or Illustrator
- Adding text to a composition
- Working with web fonts
- Creating reusable symbols
- Adding HTML5 audio and video to compositions
- Making responsive layouts
- Animating elements
- Targeting elements with actions
- Controlling HTML5 video and audio playback with actions
- Working in the Code panel
- Publishing your project
- Adding Edge Animate compositions to existing webpages
- Using OAM files in other applications