Custom code to pause certain animations?

Design help Animations & Interactions
1

Hi Everyone,

I have a top section on one of my pages that has a fair amount of animation to it (rotating text and animated background).

The problem is that i’m using the same section as a sticky section - which is causing havoc for animations further down the page.

With that being said, does anyone know of any code that can be used to essentially pause those animations upon scroll ? I’ve tried other methods such as hiding / revealing sections but cause a bit of a jump when being hidden.

I would imagine for someone who knows what they’re doing it would be a ‘simple’ piece of JS.

Here is my public share link: LINK
(how to access public share link)

2

Webflow does not expose interactions for JS eventing and manipulation.
Two possibilities that I can think of-

START & STOP

  • Design your hero interactions so that they are started and stopped by button clicks
  • Once that’s working, give the start / stop buttons ID’s and hide them
  • On page load, use JS to click the start button
  • On a scroll event, use JS to click the stop button

GSAP
If you need programming control, GSAP is generally the way to go with animations.