Jello button interaction

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

We’re transitioning to a new UI, and are in the process of updating our Webflow University content.

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.

Table of contents

Continue learning

Hmm…we couldn’t find any results for “search query”. Try a different search term or check out our community forum.

Search the forumReset the filter
Load more

Filter

Reset
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Topics
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Back to top