Hi!
On my mobile website, I have a horizontal flexbox that scrolls through cards. What I’m aiming to do is to have each card have its text show up as it enters the viewport, and disappear as it exits, with 30% offsets. Unfortunately, adding offsets doesn’t actually do anything. The animations actually work as expected, but I can’t quite figure out the offsets.
Advice would be appreciated!
Here is my public share link: (Webflow - ARCONUS)*
Hi there,
To create scroll-based animations for card text visibility, you can use Webflow’s Interactions panel. Here’s how to set it up:
The Interactions panel allows you to create animations that trigger when elements enter or exit the viewport. For card text, you can set up both “When scrolled into view” and “When scrolled out of view” triggers. Within each trigger, you can customize the animation properties like opacity, movement, and timing. You can also fine-tune the behavior by adjusting the offset settings, which determine exactly when the animation begins relative to the viewport.
For precise control, you can access these settings in the Interactions panel by selecting your text element and clicking the + icon to add a new animation. The offset controls are available at the bottom of the trigger settings, allowing you to adjust when the animation starts and ends during scrolling.
Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.
Thank you for the response!
My issue is not finding the offsets - I already have them at 30%. However, this doesn’t actually change when the animation is triggered as it enters the viewport. Doesn’t matter if I mae them 0, 15, or 30% they behave the same.
Any additional thoughts on this?
Thank you!