Animation - how do i extend the animation?

Design help Animations & Interactions
1

Hi! I need help with how I can “extend” the first animation. Currently, users see the part called “swipe casino” only after they’ve scrolled down a bit, and the animation ends up at the top of the page. I’d like it to appear lower down or be visible to the user earlier. Does anyone know how I can do this?

This ís specific in mobile view. In desktop view it looks fine.

Thank you!

Thank you so much

Here is my public share link: Webflow - Mainstream
(how to access public share link)

2

Hi there,

You can fine-tune when scroll-triggered animations appear by adjusting these settings in the Interactions panel:

The Animation boundaries setting determines the trigger point for your animation. Setting this to “Is fully visible” means the animation will trigger when the element comes completely into view. You can then use the offset percentages to adjust exactly when the animation starts and ends relative to the viewport.

For mobile responsiveness, click the device icon in the Interactions panel to customize animation settings for specific breakpoints. This allows you to create different timing behaviors across devices.

To optimize your scroll animations:

  1. Open the Interactions panel
  2. Select your element with the animation
  3. Adjust the Animation boundaries dropdown
  4. Fine-tune the offset percentages (positive values delay the animation, negative values trigger it earlier)
  5. Toggle device breakpoints as needed for mobile-specific settings

Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.