Login
Home
Pricing
Documentation
Feedback
English

Setting animations

Last updated on 12/6/2024@mrbirddev

Slidde.co allows you to apply standard CSS keyframe animations to your web elements easily. Here’s a step-by-step guide to help you get started.

the Animation Option in the sidebar

  1. Select an Element: Click on any element on your page.
  2. Open the Animation Modal: In the right sidebar, click the Animations tab button, you will find the Animation option. Click it to open a modal window.
  3. Start with Presets: We recommend starting with preset animations, which you can later modify to suit your needs. You can click the preset buttons to replace with a preset. If you click the plus icon in the button, the preset will be appended to the current animation.

Customizing Animations

The animation modal simplifies the process of setting up CSS keyframe animations into a low-code interface, making it accessible even if you’re not familiar with coding.

Keyframe animations is where you define the css properties for certain percentages. And the browser handles the transition for you.

Eg if you have a keyframes like this with a duration of 4 seconds.

0% translateX(0)

50% translateX(-20px)

100% trasnlateX(0)

The object will move 20px towards the bottom for 2 seconds, then move 20px up back to its original position for 2 seconds.

If you encounter any issues or want to learn more about keyframe animations:

  • Search Online: Google your specific questions; there are plenty of examples and resources available.
  • CSS Keyframes Tutorial: Refer to the official CSS keyframes guide on MDN for comprehensive information.

Trigger

This field controls when the animation is played.

  • Element shown: This is the default one. The animation will be triggered when the element is either scrolled into view, or the containing section is shown Hash section
  • Element shown (replay everytime): Same as above, except that the animation will be replayed each time the element is shown.
  • Page loaded: The animation will be triggered when the page is loaded.

Target(s)

Usually you don't need to set this. The default value is & which means the root element.

However, there are some cases where you will need to set it.

  • To animate the Advanced background element, you can set Target(s) to First child element, since the Advanced background element will always be the first child of the root element.

  • To apply a stagger delay to all the children elements. Read on to the Delay & staggering delay section for more details.

Delay & staggering delay

If you set Delay to 1000ms, the animation will play after waiting for 1000ms.

If you set Stagger to 50ms and set targets to All direct children element(s). The animation will apply on each of the direct children element(s), and wait for

  • first element, 1000ms,
  • second element, 1050ms,
  • third element, 1100ms,
  • ...

Text staggering

This works for a Text component.

If you set Stagger and set targets to All letter(s). The staggering effect will be applied to each letter.

Use css animation property

A plain css animation is always available for all the element in CSS. But you may need to turn on Disable in canvas for that specific css rule to allow easier editing in the editor.

Loading...