How to make a pulsing button
Creating an animated button is easy. An animated button is a nice way to attract the reader’s attention and to let them know additional content is available. When readers interact they consequently spend more time viewing the content. And let’s face it, we want the average dwell time on the page to be as high as we can make it. So let’s animate some buttons...
Here are some guidelines on how to approach this. Feel free to prepare your own buttons or you can download the assets we used here. You can also preview the animated buttons in your welcome publication on page 7.3.
You can see a preview of the animation on the gif below.
Step 1: Think through what you want
We selected an image we use for promotional purposes that represents one of our projects (Land Rover) being available across all platforms and across all devices. We decided our button would be a white dot. An animated graphic that’s going to draw the reader’s attention will be a circle. We want this circle to pulse outward three times in a short sequence and then pause for two seconds. This sequence has to be repeated infinitely.
Step 2: Design buttons
The only rule for designing a button is that it needs to be in contrast with the background. It needs to stand out and be visible. Its shape does not really matter. Ours is a white dot. We also designed an outline of this shape - a circle. We selected 5 pt for the stroke size. For quality reasons, it’s best to have all elements on the page in 1:1 size. For the animated element that’s the size as it is in its final stage of animation, and that’s the size we set in the design.
All the elements that are going to be animated need to be separated from the background. We’ll need to place the image of the button on top of the animated outlines.
Step 3: Prepare assets
We’ll use Adobe Photoshop to prepare assets for the animation. We need the dot and circles as separate png files. We’re using pngs because we need the rest of the image to be transparent. Crop the dot to the edges and save it as button1.png. Because we’ll create a three phase pulse, we need an image of the circle. It’s easiest to just have three separate files of the same image. So now we’ll crop the circle to the edges and save it three times with different names, circle1.png, circle2.png and circle3.png.
We have the assets ready to be uploaded to Edition Digital. Now it’s time to open it...
Step 4: Upload assets to Edition Digital
Open the edition and navigate to the page where you want to create the animated buttons.
Select the Image tool from the toolbar on the left hand side of the screen. Click on the work area and a window will pop up. You can either drag and drop files into it, or click on it to open the file explorer so you can browse for the button image that we created earlier. Click upload files. You’ll see a notification that the image is being uploaded and once done, the image will appear in the work area in it's original size and ratio.
Now repeat the process for the circles. You can upload multiple files at the same time. The trick of uploading them all at the same time is that they are placed at the same point of origin, which means they're already aigned.
Step 5: Positioning images on the work area
The Selection tool should be selected by default. If not, go ahead and select it from the toolbar. Now select the dot image. You’ll see you can drag it around the work area. Drag and release it on the spot you want it to be placed. You can also change the position and size in the Properties panel, if you prefer to work with exact numbers.
Now select circle1.png and then repeat the process for all three circles. You might want to use the zoom function so you can position the images more accurately. At the maximum zoom level you can move images by 1 pixel increments. Or you can use Align tool to allign your elements instantly.
Once you have all images set, we’re ready to start working on the animation...
Step 6: Animation
Deselect everything by clicking on the work area. In the Animations panel you’ll see an option to add the animation after the page opens. By default all elements already have a fade-in animation set. We’ll start by making changes to that.
Click on dot1.png's timeline between the first and second keyframe. You’ll see the element on the canvas change to a different state. There are a few handles that you can use to animate the element, but for now we’ll only grab the second keyframe in the Animation panel and drag it to 0.5 on the timeline. This is the indicator of how fast the button will appear on the page after it opens.
Selecting circle1 in the Animation panel, we’ll now use animation controls on the element. Firstly, select the diamond and drag it to the center of the circle. We’re doing this because we want the circle to zoom from its center position. Click on the first keyframe on the timeline, this is where initial properties of the elements are set after the page loads. By default all elements have opacity set to 0%. All the rest of the properties reflect the image’s initial placement. We want to scale property to be set to 1%. Grab the square handle on the element and drag it upward. The element will resize proportionally.
In the Animations panel click on plus after the last keyframe, we’ll add a delay to the beginning of the animation because we don’t want it to start right away. Now grab and drag it to the beginning of the timeline. You’ll see a pink dashed line appear to show where this part of the animation will be placed after you drop it. Grab and drag the second keyframe to two seconds, because we want an initial delay before the the animation starts. Now grab the third keyframe and drag it to mark two and a half on the timeline. We want the pulse to be quick, so we’ll have it last one second. As you will notice, the element on the work area is in its initial state now. We’ll change its scale property to 50%, therefore, while we still have the keyframe selected, we’ll turn our attention to the Properties panel, find the scale property, and change it to 50. When you’re done hit enter. The size of the element should be reduced by half. In the step editor on the right hand side of the Animations panel, we’ll change Easing function from the drop down menu to Ease In.
We now have the circle half size and fully visible, but now we also need it to disappear. For this, we'll need another step. Click the plus button and drag the keyframe to mark three of the timeline. You can either drag the square on the element or type in the number in the Properties panel to change the scale to 100%. We will also change the opacity to 0 because we want the circle to disappear while moving outwards from the dot. For that you can either drag the triangle handle on the element all the way down or use the properties panel to type in the desired value. In the step editor we also want to change the Easing to Ease Out.
We need to repeat the process for the other two circles. An easier way is to select all the steps that we’ve already created for the circle and select the copy option at the top of the Animations panel. Select the first keyframe on the second circle and click paste. You will have to delete the last keyframe that’s a legacy from the default animation and use the scissors option to cut it. By default the origin of rotation is in top left corner of the element, so we need to move that to the center.
Repeat the process for circle3 as well.
Click the close animation editor button in the top right hand side corner of the work area to close the animation interface. Select the work area in order to see a full list of the animations in the Animations panel that will start after the page opens. It’s time to set the initial delay for the animation of circles, because we want them to animate shortly one after another. Grab the second keyframe of circle2 and drag it 3/10 of a second forward. Grab the second keyframe of circle3 and drag it 6/10 of a second forward.
We’ll prepare a loop now, but we need all three circles to have the same length of animation for button's element to animate synchronized. By clicking the plus button we’ll add another step to the circle1 image. Set the duration to 2 seconds simply by dragging the last keyframe to the right. Click Loop animation in the right-hand Properties section of the Animation panel. Do the same for circle2 and circle3. All three png images will now animate from start to end of it's timeline.
Step 7: Save and preview
If you’re not completely happy with the animation of the pulse go back to the design tool and play with the settings until you’re happy with it.
For some shapes, final zoom will have to be more than 100%. Or you might just want different timings for the animation. Play around with different settings and you’ll see that the possibilities are endless.