Slide image move in bottom

Design help General
1

Hi all,

I need an help about slide image. I’ve just create a slide full image to show in homepage and I would to know if is possible to setting the animation like this: Image show from bottom and change automatically (without arrow).

Any suggestion?

Thank you so much

2

Ideally, the community will receive more details about the issue. This will include additional information about the elements, screenshots, and a read-only share link to your project which allows the community to investigate.

3

@David_P

1. Add a Slider Element

  • Drag the Slider component onto your homepage.
  • Set its height to 100vh or your preferred full-height value.

2. Add Slide Images

  • Inside each Slide, add a Div Block and set it to position: absolute, top: 0, left: 0, width: 100%, height: 100%.
  • Apply the background image using background-image: cover.

3. Set Slider to Auto-Play

  • Select the Slider wrapper.
  • In the Settings panel, check:
    • Autoplay slides
    • Set your desired delay (e.g., 3000ms)
    • Uncheck “Show arrows” and “Show slide nav” if not needed

4. Add Bottom-to-Top Animation

  • Select the image Div Block (inside each Slide).
  • Go to Interactions (lightning icon) → Element Trigger → While Slide is in view.
  • Add a new animation:
    • Initial State:
      • Move Y: 100%
      • Opacity: 0
    • Final Animation:
      • Move Y: 0%
      • Opacity: 100%
      • Duration: 0.6s (adjust as needed)
      • Easing: ease-in-out
  • Apply the same animation to all slides.