Animate WP Logo

Official Docs

Animatable Properties

Box properties

Opacity / Alpha

Possible Values:

numbers between 0 and 1
e.g. 1, 0.8

Note: Only numbers. Do not append units.
Opacity / Alpha

Background Color

Possible Values:

Color picker (hex)

Background Color

Box Shadow

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

Possible Values:

e.g. 10px 10px 5px 0px rgba(0,0,0,1);
e.g. 10px 10px 5px 20px #000000

Box shadow

Height, Width

Possible Values:

%, px
e.g. 20%, 50px

Height, Width

Margin, Padding

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

Possible Values:

%, px
e.g. 10px
e.g. 10px 5% 2px 4px
e.g. 10px 5%
e.g. 10px 5% 20px

Note: You can omit the units if 0.
Margin, Padding

Border Color

You can specify the colors of each border side individually.

Possible Values:

Color picker (hex)

Border Color

Border Radius

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

Possible Values:

%, px
e.g. 50%
e.g. 15px 50px 20px 4px
e.g. 15px 50px
e.g. 15px 50px 20px

Note: You can omit the units if 0.
Border Radius

Border Width

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

Possible Values:

%, px
e.g. 50%
e.g. 2px 5px 2px 4px
e.g. 2px 5px
e.g. 2px 5px 2px

Note: You can omit the units if 0.
Border Width

Positioning and Transform Properties

Horizontal Position (X)

Possible Values:

%, px
e.g. 20%, 50px

Horizontal Position

Vertical Position (Y)

Possible Values:

%, px
e.g. 20%, 50px

Vertical Position

Rotation

Possible Values:

numbers in degree
e.g. 20, 360

Note: Only numbers. Do not append units.
Rotation

Scale

Also available: Scale Y and Scale X to scale the element on a single axis.

Possible Values:

numbers as multiplier
e.g. 1, 2, 0.5

Note: Only numbers. Do not append units.
Scale

Skew

Possible Values:

numbers in degree
e.g. 20, 50

Note: Only numbers. Do not append units.
Skew

Top, Right, Bottom, Left

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.

Possible Values:

%, px
e.g. 20%, 50px

Position

Z-Index

Not usable on elements that have „position: static“

Possible Values:

numbers
e.g. 10, 999

Z-Index

Text properties

Font Color

Possible Values:

Color picker (hex)

Font Color

Font Size

Possible Values:

%, px, em
e.g. 100%, 16px, 2em

Font Size

Letter spacing

Possible Values:

%, px, em
e.g. 100%, 16px, 2em

Letterspacing

Word spacing

Possible Values:

%, px, em
e.g. 100%, 16px, 2em

Word spacing

Line height

Possible Values:

%, px, em
e.g. 100%, 16px, 2em

Line
Height

Text Shadow

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

Possible Values:

e.g. 2px 2px 15px rgba(145, 233, 0, 1)
e.g. 1px 1px 1px rgba(255, 255, 255, 0.5)

Text Shadow

ScrollTo

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).

ScrollTo Y Destination

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.

ScrollTo Y Offset

Offset in pixels for the specified Y destination.

ScrollTo X 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.

ScrollTo X Offset

Offset in pixels for the specified X destination.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

SplitText

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.

Split Text Variant

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.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren.

SVG Animation (ADVANCED)

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.)

Custom Property (ADVANCED)

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)