numbers between 0 and 1
e.g. 1, 0.8
Color picker (hex)
Use a standard box shadow css syntax.
There are various tools available to visualize and calculate box shadows.
Copy the whole value string into AnimateWP
e.g. 10px 10px 5px 0px rgba(0,0,0,1);
e.g. 10px 10px 5px 20px #000000
%, px
e.g. 20%, 50px
If you specify only one value, this border width will be applied to all 4 sides.
However, you can specify each side separately if you wish.
Four values: first value applies to top-side, second value applies to right-side, third value applies to bottom-side, and fourth value applies to left-side
Three values: first value applies to top-side, second value applies to right-sideand left-side, and third value applies to bottom-side
Two values: first value applies to top-side and bottom-side, and the second value applies to right-side and left-side
One value: applies to all 4 sides
%, px
e.g. 10px
e.g. 10px 5% 2px 4px
e.g. 10px 5%
e.g. 10px 5% 20px
You can specify the colors of each border side individually.
Color picker (hex)
If you specify only one value, this radius will be applied to all 4 corners
However, you can specify each corner separately if you wish.
Four values: first value applies to top-left, second value applies to top-right, third value applies to bottom-right, and fourth value applies to bottom-left corner
Three values: first value applies to top-left, second value applies to top-right and bottom-left, and third value applies to bottom-right
Two values: first value applies to top-left and bottom-right corner, and the second value applies to top-right and bottom-left corner
One value: all four corners are rounded equally
%, px
e.g. 50%
e.g. 15px 50px 20px 4px
e.g. 15px 50px
e.g. 15px 50px 20px
If you specify only one value, this border width will be applied to all 4 sides.
However, you can specify each side separately if you wish.
Four values: first value applies to top-border, second value applies to right-border, third value applies to bottom-border, and fourth value applies to left-border
Three values: first value applies to top-border, second value applies to right-border and left-border, and third value applies to bottom-border
Two values: first value applies to top-border and bottom-border, and the second value applies to right-border and left-border
One value: applies to all 4 border sides
%, px
e.g. 50%
e.g. 2px 5px 2px 4px
e.g. 2px 5px
e.g. 2px 5px 2px
%, px
e.g. 20%, 50px
%, px
e.g. 20%, 50px
numbers in degree
e.g. 20, 360
Also available: Scale Y and Scale X to scale the element on a single axis.
numbers as multiplier
e.g. 1, 2, 0.5
numbers in degree
e.g. 20, 50
For absolutely positioned elements. Sets the position parameter based on the position to its nearest ancestor. If the absolute positioned element has no ancestors, it uses the document body. A positioned ancestor is an element whose position is anything except static.
%, px
e.g. 20%, 50px
Not usable on elements that have „position: static“
numbers
e.g. 10, 999
Color picker (hex)
%, px, em
e.g. 100%, 16px, 2em
%, px, em
e.g. 100%, 16px, 2em
%, px, em
e.g. 100%, 16px, 2em
%, px, em
e.g. 100%, 16px, 2em
Use a standard text shadow css syntax.
There are various tools available to visualize and calculate text shadows.
Copy the whole value string into AnimateWP
e.g. 2px 2px 15px rgba(145, 233, 0, 1)
e.g. 1px 1px 1px rgba(255, 255, 255, 0.5)
Allows you to scroll the browser window or a custom container with scrollbar to a certain position.
If you want to scroll the browser window specify „window“ as your Class/ID Selector of your animation.
If you want to scroll a certain container specify the containers class or id and please note that your container must have a scrollbar (overflow:scroll).
The destination where the window or custom element shall scroll to. Use a number (e.g. 400) for an absolute position or specify a selector (e.g. #myid or .myclass) if you want to scroll to an element on your page.
Offset in pixels for the specified Y destination.
If you have a horizontal scrollbar you can use the X destination to scroll this container. Use a number (e.g. 400) for an absolute position or specify a selector (e.g. #myid or .myclass) if you want to scroll to an element on your page.
Offset in pixels for the specified X destination.
If this option is turned on, you will animate the text inside your selected elemented, instead of the element itself. You can use this technique to animate each character, word or line in your text on it’s own.
There are 3 Variants of SplitText available. You can split your text into characters, words or lines automatically and animate each individually.
The option to select the variant becomes available, as soon as you activate SplitText.
The ’stagger‘ animation types are recommended to get the best result.
Your line breaks and overall text layout will not be broken and the text will stay responsive.
AnimateWP also gives you the ability to use the DrawSVG Plugin of the Greensock Animation Platform.
This allows you to progressively reveal (or hide) the stroke of an SVG path, line, polyline, polygon, rect, or ellipse. This is done by controlling stroke-dashoffset and stroke-dasharray CSS properties.
You can learn more about DrawSVG on greensock.com
If you are familiar with the DrawSVG syntax, just write the correct value into the corresponding ‚Draw SVG Value‘ field after selecting ‚SVG Animation (Advanced)‘.
(By the way, the AnimateWP Logo on the Main Page is animated with this DrawSVG function.)
If you are familiar with the Greensock Animation Platform, you already know that you can animate almost any element property.
If you want to animate a certain property which is supported by GSAP, but is not yet in the animatable properties list of AnimateWP, you can still animate and control these properties, if you know the correct property name and value syntax.
This allows you to animate ANY property (supported or not supported by AnimateWP) as long you know the correct property name and value syntax.
If you feel like it, you can also animate properties which are already supported, by specifying property name and value (e.g. backgroundColor)
e.g.
The ‚transform-origin‘ css property is not yet fully included into AnimateWP.
You can still animate it by selecting ‚Custom property‘ and specifying ‚transformOrigin‘ as custom property and e.g. ‚50% 50%‘ as custom property value.
(Please note that properties with a dash become camelCased. e.g. transform-origin > transformOrigin)