The Animation feature in Greyd allows users to add CSS-based animations to almost any block in the block editor — both WordPress Core and Greyd blocks. It integrates natively and is accessible via the right-hand sidebar of each block.
To use it, open the block editor and select any block such as a paragraph, heading, image, or group. In the sidebar, scroll down and open the Animation panel. From there, you can add a new animation or edit/delete an existing one.
Clicking Add Animation opens a modal with a real-time preview. Hovering over the preview plays the animation based on your current configuration.
Animation Configuration
The modal contains three rows, each defining a key aspect of the animation:
Action — What should happen?
This section defines the core behavior of the animation.
- Hide / Show: Use effects like Fade In (Show) / Out (Hide), from Up / Down / Left / Right, or no effect.
- Change Color: Transition text and background colors. Unselected properties remain static.
- Move Horizontally / Vertically: Define initial and final positions in
px,%,em,rem,vw, orvh. - Scale: Animate scaling between 0 and ~3. A value of 1 means 100%. Choose the scale origin (e.g. center, top-left).
- Rotate: Rotate elements between two angles (e.g. 0° to 180°) by defining an initial and final state.
- Filter: Apply effects like Blur, Brightness, Contrast, Grayscale, Invert, Saturate, Sepia with initial and final state.
- Custom: Enter numeric CSS-like properties (e.g.
scale: 0.8) in initial and final states. Values must exist in both states and match in order.
Trigger — When should it happen?
This section defines what event starts the animation.
- Hover: On mouse hover.
- Click: On mouse click.
- On Scroll: Animation starts when the element enters the viewport. You can define the start point as a screen percentage (e.g. 50%) or use a fixed scroll offset in pixels. It can be triggered in both directions.
- Parent Hover / Click: Triggers when a parent element is hovered or clicked. The parent can be selected via dropdown or a selector (anchor or class).
- While Scrolling: Animates the element continuously between two scroll positions. You can use negative or over 100% values to trigger before/after visibility.
- On Page Load: Triggers the animation as soon as the page loads. Can be set to loop.
Transition — How should it animate?
This section defines the animation’s timing and easing behavior.
- Transition Type: Choose from Ease, Ease-In, Ease-Out, Ease-In-Out, or Linear.
- Duration: Animation length in milliseconds (0–3000ms).
- Delay: Optional delay before the animation starts in milliseconds.
Once configured, click Save to apply the animation, Cancel to discard, or Reset to revert changes.
Block Compatibility
The Animation feature works with nearly all blocks in the editor. Exceptions include:
- Query
- Post Template
- Spacer
- Popover
- Conditional Content
Background Animation Support
Some blocks also support animations specifically for their background. This allows animating background images without affecting inner content.
- Columns
- Cover
- Content Box
Video
Hi, this is Sandra from GREYD and today I’d like to show you how to make your GREYD.SUITE website more lively with our natively integrated animations. You’ll find various possibilities, like making elements bigger or smaller, moving items, having them appear or disappear, on hover, on scroll or also on click. You can make elements change position, change color, you can work with different filters or effects, turn elements — so lots and lots of possibilities, which I’m going to show you now in the backend. In GREYD.SUITE you can animate almost any element, whenever you find the animation tab here in the settings on the right.
You can then select from various different actions like hiding or showing, moving, scaling, turning, or different filter effects. Depending on the effect or the action you choose you can then define the effect in more detail. For example, when you hide or show elements you have different effects to choose from. If you make them bigger or smaller you can define the initial and the end state, and you’ll also find a preview up here. The same goes for moving or turning elements: also initial and end state. For filters, for example, you can select an effect and define the initial and end state.
Below you can set what the trigger for the animation should be. You will find the classics hover and click, but also on scroll, during scrolling, and very interesting: parent hover and parent click. That means, you can make the animation dependent on a parent element. For example, if you have two content boxes within each other and click on the outer box, the inner element will be animated. That can be done really easily. You just have to select which is the parent element and as you can see the elements or the blocks automatically get a class or an ID. But you can make life much easier if you give the elements you want to use here dedicated names. Like I did here, I named it “content box”. Let me show you quickly how that works.
Each element on the right offers you advanced settings and an HTML anchor. You can see here: this is the individual name I’ve chosen. Let’s change that for now and update.
If I now go back to the animations and select “parent click” or “parent hover,” you can see the new name “example”. That makes it a lot easier to find your individual parent elements.
Below you will find different options for the transition, the duration of your animation, how fast or slow it should be, and whether you want to add a delay. And if with all those options you don’t find the animation that you like, you can even select “individual” here and enter your custom animation code.
For more videos and information please visit our Helpcenter.