Animate Gradients

From version 1.1.0, WPGraphicator allows you to create, and animate gradients. In this article I am going to show you how to use the new gradient control.


There are two types of gradients:

You can set gradients for both stroke, and fill just like colors.

Please note that if you animate SVG gradients you need to keep same number of color stops during animation, just like the number of nodes while animating path. For example: you can’t make gradient with three color stops at the 0 second, and then change it to have five color stops at the next second.

In this tutorial, we will create a text: “Gradient”, and apply a vertical linear gradient to its fill, that will be move from left to right.

So, lets get started:

Step 1: Set up project

Create a new WPGraphicator project, and set canvas width to 200, and height to 100, for example.

Setup canvas size
Setup canvas size.

Step 2: Create a text shape

Go to the toolbar, and select “Add Text” icon, or press “T” key.

Move your cursor to the middle of the canvas, and click there to add a new text shape. Then write something you want, for example “Gradient”.

Add text shape
Add text shape.

Step 3: Apply gradient

First we will remove stroke from this shape. Open the “Stroke” tab, and set stroke width to 0.

Remove stroke
Remove stroke.

It looks like the text is disappeared, but no matter just go to the “Fill” tab, and choose “Linear Gradient” fill type.

Choose fill type
Choose fill type.

As you can see, your text shape got a default gradient, from black to transparent colors.

Default gradient
Default gradient.

Step 4: Using the gradient control

As you can see there are a gradient strip with two color stops under the color picker. The little rectangles (handles) represent the color stops which you can move right, and left to change color stop offset. If you click one of the handle it will be filled which shows you this color stop is the active, so you can pick a color for that.

Using the gradient control
Using the gradient control.

If you click the gradient strip you can add more color stops. To remove existing color stop, just double click on one of the handle. You can add up to 8 color stops, and at least 2.

So, in this tutorial we are creating a red fill for our text shape in which a green neon will move from left to right. Set the two existing color stops to #ff0000 (red).

Add a new color stop, and set it to #00ff00 (green).

Add color stop
Add color stop.

Just like each animatable property, the first step to animate this gradient is that you click on the plus icon next to the “Fill Color” label to add the first keyframe to the timeline.

Move the playhead to the next second, e.g: 2, and change value by moving handle to an other position.

Change color stop offset
Change color stop offset.

Set easing to “Quadratic In Out” to be more realistic. Open the keyframe settings by double clicking the keyframe point, and choose an easing from the list.

Change easing
Change easing.

To get an infinity animation, like the example above, open the shortcode generator, and set repeat to “Infinity”, and direction to “Alternate”.

Generate shortcode
Generate shortcode.

And finally copy the generated shortcode, and paste to your site where you want.

Spread the love

Leave a Comment

Your email address will not be published.

7 − four =