Button Shake on Invalid Response

Ask us anything How do I?
1

Hi there,

There doesn’t seem to be a clear way to make a button animate and shake when there is an invalid response via my workflow through a True False split?. Would someone be able to walk me through this? I even asked Copilot and its answer was “I don’t know.” which made me laugh :joy:

2

I think it’s definitely doable with states → States | Weweb documentation

You could have a state with the animation that triggers when the workflow switches to false.

3

Hey @adammiko

I got curious about this. Here’s what I manage to make it work using Quentin’s suggestion and CSS animations:

  1. Define your animation keyframes in a tag somewhere.
<style>
@keyframes wiggle-wiggle {   
    0%   {transform: rotate(0deg);}  
    25%  {transform: rotate(5deg);}  
    50%  {transform: rotate(-5deg);}  
    100% {transform: rotate(0deg);}}
</style>
  1. Create a new state for your button. I’ve named mine “error”. Add the following CSS to your button:
animation: .5s ease-in-out wiggle-wiggle;
  1. Create a variable “errorState” that will condition the Error state of your button. On your workflow, change the value of your variable to true to trigger the animation. Reset the variable to false after a delay of 500ms. Et voilà !

Here is a video walkthough.

5 Likes
4

@jptrinh, you’re definitely the animation GOAT :raised_hands: