Enable Jello interactions

Bring any element in your project to life using pre-built animations.

This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
Transcript
This video features an old UI. Updated version coming soon!

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.

Clone this project
Try Webflow — it's free

Production for this lesson

Directed by

-

Produced by

-

Written by

-

Article by

-

Edited by

-

Designs by

-
This video features an old UI. Updated version coming soon!