How to keep an object moving around while scrolling down

Support
#1

Hello,

Is there an option to keep an object on the page moving. Just small movements like left and right and up and down.
I can find the options in the effects panel. Just i cannot figure out how to keep it going in stead of just when entering the page or leaving. I think i’m just missing something here.

Hope someone can help me out, i’ve been looking for this option for a long time already.

Thanks,

Jeroen

#2

Hey @jugglingjay.

Regretfully, there’s no option. The Effects panel does not have a built-in “continuous” / “always playing” trigger. It only fires on the two triggers:

  • Interaction — runs on hover / touch
  • Scroll — runs on entering or exiting the viewport (with an optional “Reset” or “In‑n‑Out” behavior so it can replay)

Below are a few ways to get the continuous “idle motion” you want. However, please do note that this requires custom coding which is beyond the scope of our support. If you need more help with this, we have our One service you can subscribe in order to receive general WordPress support including more custom coding guidance.

  1. CSS override on the element (simplest, works with the built‑in animations)

    • Turn on the Interaction effect (e.g. Shake X, Wobble, Pulse).
    • Give the element a Custom ID or Custom Class (e.g. js-float).
    • Add this to the page/global CSS (Theme Options → Custom CSS, or the page’s CSS box):
      .js-float { animation: pulse 3s ease-in-out infinite; }
      Replace pulse with the animation name from the list (the keyframe names match the labels in camelCase: pulse, shakeX, wobble, headShake, heartBeat, etc.). This bypasses the hover trigger and just loops it.

  2. Your own keyframes for a subtle drift (more natural than the attention‑seekers, which can be a bit aggressive):

    @keyframes drift { 0%,100%{transform:translate(0,0)} 50%{transform:translate(6px,-6px)} }
.js-float { animation: drift 4s ease-in-out infinite; }

  3. Use a Lottie element — that element is designed for continuous looping animation and has loop controls built in.

  4. Use the Particle element / a particle background if it’s a decorative element — that’s the only place in Pro where continuous motion is exposed as a setting rather than via custom CSS.