How do I animate elements on my website?

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 of 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. And 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 we’ll also find a preview up here. Same goes for moving or turning elements: also initial and end state and 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 from 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 yourself much more easier, if you give to 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 HTML anchor. You can see here: This is the individual name I’ve chosen. Lets change that for now and update.

If I now go back to the animations and select “parent click” or “parent hover,” here you can see the new name “example”. So that makes it a lot more easier to find your individual parent elements. And below, you will find different options for the transition, the duration of your animation, how fast or slow should it be and if you want to have a delay. And if with all those options you don’t find your animation that you like to have, you can even select “individual” here and enter your individual animation code here.

For more videos and information please visit our Helpcenter.