CSS Animations Help

Ask us anything How do I?
1

Hello,

Is there any way to trigger this animation by some action like click or something else?

By the way what are those options for? “Alternate”, “Fill mode” and “Play state”?

image
image379×506 24 KB

2

Hi!

To trigger the animation you can bind the play state to a boolean variable and make it true on click :slight_smile:

Alternate is available when you are in infinite mode, it means it will alternate between start to end, end to start, start to end etc, instead of start to end, start to end, start to end

For the fill mode you can find more information there => animation-fill-mode - CSS: Cascading Style Sheets | MDN

3

To trigger it you should bind a variable to the Play State, true = on false = off

Fill mode: determine how elements will appear before and after an animation::

  • None: No extra styles are applied.
  • Forwards: Element keeps styles from the final animation frame.
  • Backwards: Element starts with styles from the initial animation frame.

Alternate: makes animation run forwards then backwards.

Play State: when off mean the animation will not run

2 Likes
4

How do we use the new animation features to set the play state based on scroll position?

Essentially, like in webflow, when divs come into view, I’d like them to slide/fade in. This to get reset when out of view so that it can replay again when it comes back into view.

5

Hey @what.gift :slight_smile:

One way to do that would be with states:

  1. Set your animation on the state of the element you want to animate (call it for instance, inView).
  2. On your animated element, you can Watch Scroll Position.
  3. And the condition to activate that state would be to if the yPercent of your element is between 0 and 100 (if the element in on the screen)

I can share a step-by-step if that’s not clear!

6

Thanks @jptrinh

I’ve managed to get it working following these principles.

It will work for now. But it will only run 1 time due to limiting the count to 1 as it can’t be infitie. I’m looking for the element to “slide in”. I was hoping that it would happen each time the element is scrolled into view.

I can write custom JS to increment the count, but it then reverses the animation so it’s not starting again.

This is getting tediously complicated for a small animation and custom coding. It would be nice if WeWeb had better native capabilities to handle this type of animation effect to bring website in to the modern era like Webflow amimation control - Webflow is leaps ahead here.