# CSS Animations Help **URL:** \ **Category:** How do I?\ **Tags:** design\ **Created:** [June 27, 2024, 1:33pm UTC](https://community.weweb.io/t/css-animations-help/9391 "2024-06-27T13:33:02Z")\ **Posts on this page:** 7\ **Page:** 1
**Author:** ![albarracim](https://avatars.discourse-cdn.com/v4/letter/a/2bfe46/32.png) [@albarracim](https://community.weweb.io/u/albarracim)\ **Post date:** [June 27, 2024, 1:33pm UTC](https://community.weweb.io/t/css-animations-help/9391/1 "2024-06-27T13:33:02Z")
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](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/5/5ee9ce3784519c95c0ba25ea82bbc9903c69e6e8.png) ---
**Author:** ![Alexis](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/alexis/32/13248_2.png) [@Alexis](https://community.weweb.io/u/Alexis)\ **Post date:** [June 27, 2024, 2:47pm UTC](https://community.weweb.io/t/css-animations-help/9391/2 "2024-06-27T14:47:06Z")
Hi! To trigger the animation you can bind the play state to a boolean variable and make it `true` on click 🙂 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](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode) ---
**Author:** ![Miguel](https://avatars.discourse-cdn.com/v4/letter/m/439d5e/32.png) [@Miguel](https://community.weweb.io/u/Miguel)\ **Post date:** [June 27, 2024, 2:51pm UTC](https://community.weweb.io/t/css-animations-help/9391/3 "2024-06-27T14:51:01Z")
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 ---
**Author:** ![what.gift](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/what.gift/32/8069_2.png) [@what.gift](https://community.weweb.io/u/what.gift)\ **Post date:** [July 3, 2024, 3:58pm UTC](https://community.weweb.io/t/css-animations-help/9391/4 "2024-07-03T15:58:58Z")
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. ---
**Author:** ![jptrinh](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/jptrinh/32/1493_2.png) [@jptrinh](https://community.weweb.io/u/jptrinh)\ **Post date:** [July 4, 2024, 11:27am UTC](https://community.weweb.io/t/css-animations-help/9391/5 "2024-07-04T11:27:03Z")
Hey @what.gift 🙂 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! ---
**Author:** ![what.gift](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/what.gift/32/8069_2.png) [@what.gift](https://community.weweb.io/u/what.gift)\ **Post date:** [July 5, 2024, 12:05pm UTC](https://community.weweb.io/t/css-animations-help/9391/6 "2024-07-05T12:05:55Z")
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](https://webflow.com/interactions-animations) - Webflow is leaps ahead here. ---
**Author:** ![clncsports](https://avatars.discourse-cdn.com/v4/letter/c/ecccb3/32.png) [@clncsports](https://community.weweb.io/u/clncsports)\ **Post date:** [February 8, 2025, 8:25pm UTC](https://community.weweb.io/t/css-animations-help/9391/7 "2025-02-08T20:25:21Z")
sounds like i’m getting stuck in a similar spot. I’m looking for a piece of text (displaying subtotal $ amount) to “pop” every time quantity is incremented and subtotal changes. It works great when setting to count but then can only play on the first quantity adjustment. Surely there’s a best practice to achieve what I’m going for?