What are custom animations and when should you use them? 

Custom animations are a good compliment to the more common transition effects 🔗  and pulsate effects 🔗  that the banner builder offers.  

Instead of using one of the transition effects as an in or out animation you can create a custom in and/or out animation for an object in the timeline. The advantage of using custom animations is that you can create several keyframes during a single in or out animation instead of just one keyframe, which is how common transition effects function. 

Custom animations are something that give you that little extra when the common transitions don't have what you are looking for. Maybe you want an element to move in several different directions while visible on the canvas? Or maybe you need more control over the objects exact start and end position? 

Create a custom animation 

To create a custom animation for an object in the timeline, simply click in the beginning or in the end of the object. 

Then click Custom

Once you have clicked Custom you will enter the custom animations editor for the selected object. In this case, a text. Everything else on the canvas is disabled in this view. You can only animate the text. 

The ✚-sign in the beginning and the end of the object can be used to add frames for the in transition (✚-sign in the beginning) and the out transition (✚-sign in the end). 

In the image below you can see that I add 3 frames in the beginning of the object. And also adjusting the size of the keyframes by dragging it. The size of the keyframes decides the duration of the animation from one keyframe to the next. 

Below, you can see when I add some more keyframes and also adjust the position of the text at the point of the keyframes. I'm basically just placing the playhead in one keyframe, then adjusting the position of the object on the canvas. As soon as I move the object in a certain keyframe, that new position or rotation is then saved in the keyframe. To create the next animation, simply move the playhead to the next frame, and adjust the position. These different positions in the keyframes will make the text element move between these positions over the time specified in the animation editor. 

Here you can see the result of the animation that was added to the text from the image above: 

Learn how to create this button animation 🎓

  1. In this case I will use a normal in transition (down) and then add a custom animation for the out animation. Open the custom animations editor for the button or object that you want to animate. 

2. Below you can see when I add the keyframes we need for creating this animation. I start by adding 6 keyframes in total. The animation will start just before 4 seconds since that is where I placed the first keyframe. The first 4 short keyframes will be the animation where the button jumps up and down 2 times. The the 5th longer keyframe will be when the button is just still on the canvas, and the last keyframe is where the button moves out from the banner. 

3. Done! Click Close advanced mode and preview your banner! 

Learn how to create this background animation 🎓

In the image above you can se a really nice and simple animation that you can create by using the custom animations. Of course the easing type and the speed if this animation can be changed as you please. Below, I will describe how to replicate this in Bannerflow.

1. This custom animation will be added both to the in transition and the out transition. Så you can choose any of them when you open the custom animations editor. 

2. Start by choosing a default position for the background image. 

2. Time to add keyframes. In this case we need one long keyframe in the beginning and one in the end. The light green area in the middle is the default position for the image which you defined in the previous step. 

3. Add the position for the background image in 2 keyframes that we have added. 

4. Change the easing to Linear, to make the object to move at an even speed. 

5.  Done! Click Close advanced mode and preview your banner! 

Did this answer your question?