Skip to content

Bubble plugin · Interface

The Bubble Animations plugin in Next.js

Browser helpers that animate elements.

Partly converts · 2 of 3 parts

By The deBub teamUpdated

On this page

01What it becomes

Browser helpers that animate elements. The animate and stop actions become helpers that run the same named animations on an element, for the duration you set.

No extra npm package: the generated code uses React, Next.js and browser APIs only.

02What converts

  • Animate an element by id (named animation, duration, looping)
  • Stop an animation

03Not converted yet

  • The plugin’s Animation element

Where your app uses one of these, the generated code keeps a marked placeholder in the right place and your report lists it, so it can be finished with the assistant or by any developer. The rest of the plugin works as described above.

04About this plugin

Animations (24+ simple elements).

Questions

Does the Animations plugin work outside Bubble?
Not as it is: Bubble plugins only run inside Bubble. In a Next.js app it is replaced by generated code — Browser helpers that animate elements.
Will my Animations settings carry over?
Mostly. deBub converts 2 of the plugin’s 3 parts from your .bubble export; anything else is marked in the code and listed in your report. Secret keys are added as environment variables.

The deBub team

We build the Bubble → Next.js compiler behind deBub. Spotted something out of date? Write to hello@debub.io.

All 45 plugins

AirAlert

Airdev

Toast notifications from a small browser helper

Converts

A React component that ships with your app

Converts

A React component that ships with your app: drag/drop groups and drop areas

Partly converts · 3 of 4 parts

A React component that ships with your apps for Airdev Canvas

Partly converts · 18 of 21 parts

Leave Bubble.
Keep building.

The scan is free and shows your exact price. No card needed until you choose to generate.

Start with a free scan