Setting animations
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
- Select an Element: Click on any element on your page.
- Open the Animation Modal: In the right sidebar, scroll to the bottom where you will find the Animation option. Click it to open a modal window.
Use Preset Animations
- Start with Presets: We recommend starting with preset animations, which you can modify to suit your needs.
- Find More presets: You can find a list of preset animations at Animate.css. If you need a specific animation, let us know, and we can add it to the list.
Customize 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.
Animating child elements
You can target the children of the root element by setting Targets to &>*.
Staggering delay
If you change delay to the following values, a staggering effect will be applied.
targets: &>*
delay: anime.stagger(100) // increase delay by 100ms for each elements.
targets: &>*
delay: anime.stagger(100, {start: 500}) // delay starts at 500ms then increase by 100ms for each elements.
For more example please take a look here Staggering basics
Use css animation property
A plain css animation is always available for all the element in Custom styles. But you may need to turn on Disable in canvas for that specific css rule to allow easier editing in the editor.