Jello button interaction

In this lesson, you’ll learn how to add a jello interaction to your form button using the following:

1. Add a form
2. Set up your animation
3. Test the interaction

Add a form

In the Add panel, scroll to the Form section and drag-in a Form block element onto the canvas.

Next, select the element that will have the Interaction. For this example, we’ll select the button.

Set up your animation

Create a trigger

With your button selected - you’ll first create the trigger for the animation (which starts an animation when we interact with an element—like hovering or clicking), and you can do this in 3 steps:

1. Open the Interactions panel
2. Click the plus icon on the Element trigger section
3. Select a trigger (e.g. Mouse click)

Select pre-built animation

Now, you can select a pre-built option that will animate your button when someone triggers the element.

To do this: 

1. Click the Select an action dropdown button
2. Select any pre-built animation you like (e.g. Jello)

Test the interaction

Test your interaction on your live-site. Click the Publish button, select the domain you want to publish, then click Publish to selected domains.

Now, when anyone clicks on your button to submit your form - they’ll be able to see your jello button in action.

‍

But that’s an overview of pre-built animations using Jello in the Webflow Designer.