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:
- Linear gradients change their colors along a straight line.
- Radial gradients draw colors that radiates out from a central point.
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.
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”.
Step 3: Apply gradient
First we will remove stroke from this shape. Open the “Stroke” tab, and set stroke width to 0.
It looks like the text is disappeared, but no matter just go to the “Fill” tab, and choose “Linear Gradient” fill type.
As you can see, your text shape got a default gradient, from black to transparent colors.
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.
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).
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.
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.
To get an infinity animation, like the example above, open the shortcode generator, and set repeat to “Infinity”, and direction to “Alternate”.
And finally copy the generated shortcode, and paste to your site where you want.