# Marquee component is blocking text animation of the hero component

**URL:** <https://forum.finsweet.com/t/marquee-component-is-blocking-text-animation-of-the-hero-component/7318>\
**Category:** Finsweet Components\
**Created:** [May 21, 2026, 3:31pm UTC](https://forum.finsweet.com/t/marquee-component-is-blocking-text-animation-of-the-hero-component/7318 "2026-05-21T15:31:54Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![mark8](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/mark8/32/3671_2.png) [@mark8](https://forum.finsweet.com/u/mark8)\
**Post date:** [May 21, 2026, 3:31pm UTC](https://forum.finsweet.com/t/marquee-component-is-blocking-text-animation-of-the-hero-component/7318/1 "2026-05-21T15:31:54Z")

</div>

## Description

I got Webflow support to look into this and they informed me that the marquee component is stopping my hero text from animating in on page load. It works for all other components but any page with the marquee is broken until a user scrolls.

Is there a setting update I can pass to the component? I really don’t want to have to go through and update the animation to use GSAP over standard Webflow animations.

## Site URL

**Required:** Please provide a staging/production URL where we can see the issue

- URL: [Qu | Omnichannel Ordering](https://qu-beyond.webflow.io/ordering)
- Webflow Read-only link: [Webflow - Qu Beyond](https://preview.webflow.com/preview/qu-beyond?utm_medium=preview_link&utm_source=designer&utm_content=qu-beyond&preview=9c9c1af35bd5bdbee9bf98e7711f0292&pageId=69864b304e55e957cc9961b6&locale=en&workflow=preview)

## Steps to Reproduce

1. load page, content is missing
2. scroll and content shows  
…

## Expected Behavior

I expect the content to show on page load and not after scroll. Any page that does not have the marquee component, works as expected.

## Actual Behavior

hero is empty until you scroll, when a marquee is anywhere on the page.

## Video/Screenshots

**Required:** Please provide a short screen recording showing the issue

- Video link: [Loom/Screen recording URL]
- Screenshots (if applicable): [Upload or link to screenshots]

## Additional Context

- Browser: [e.g., Chrome 120, Safari 17]
- Device: [e.g., Desktop, iPhone 14]

> _NDA Notice:_ If you’re under an NDA, please feel free to send us a Direct Message/Email with the above information.

---

<div class="post-metadata">

**Author:** ![jesse.muiruri](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/jesse.muiruri/32/5523_2.png) [@jesse.muiruri](https://forum.finsweet.com/u/jesse.muiruri)\
**Post date:** [May 22, 2026, 10:24am UTC](https://forum.finsweet.com/t/marquee-component-is-blocking-text-animation-of-the-hero-component/7318/2 "2026-05-22T10:24:06Z")

</div>

Hi @mark8,

Your setup (Lenis + GSAP + ScrollTrigger + IX2 + Marquee all on the same page) is pretty elaborate   
The fact that it works on scroll shows it’s triggered by this line

```auto
 lenis.on("scroll", ScrollTrigger.update);

```

Hero stays blank until you scroll, Lenis fires `ScrollTrigger.update()` , animations play then content appears

We need to refresh the `ScrollTrigger`. Add this after the Lenis setup, the requestAnimationFrame ensures the marquee has finished all DOM changes before ScrollTrigger.refresh() runs

```auto
  window.FinsweetAttributes ||= [];
  window.FinsweetAttributes.push([
    'marquee',
    () => {
      requestAnimationFrame(() => {
        ScrollTrigger.refresh();
      });
    }
  ]);

```

---

<div class="post-metadata">

**Author:** ![mark8](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/mark8/32/3671_2.png) [@mark8](https://forum.finsweet.com/u/mark8)\
**Post date:** [May 22, 2026, 2:05pm UTC](https://forum.finsweet.com/t/marquee-component-is-blocking-text-animation-of-the-hero-component/7318/3 "2026-05-22T14:05:18Z")

</div>

Hey @jesse.muiruri I tried adding it at the end of the lenis code. Unfortunately, it doesn’t seem to have fixed the bug. This is the lenis code and where I imported your snippet.

Thanks for the help

---

<div class="post-metadata">

**Author:** ![jesse.muiruri](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/jesse.muiruri/32/5523_2.png) [@jesse.muiruri](https://forum.finsweet.com/u/jesse.muiruri)\
**Post date:** [May 23, 2026, 6:19pm UTC](https://forum.finsweet.com/t/marquee-component-is-blocking-text-animation-of-the-hero-component/7318/4 "2026-05-23T18:19:58Z")

</div>

Hi @mark8

_Here’s how to implement the fix;_

In Webflow Designer, go to the Interactions panel and select each of the animating hero elements e.g. the `h1` with the text `Omnichannel Ordering`

1. Select the element on the canvas
2. In the Interactions panel, you’ll see the animation trigger `Scroll Into View`
3. Delete it
4. Add a new trigger and choose `Page Load`
5. Recreate the animation keyframes under the `Page Load` trigger
  - If they don’t carry over automatically, you’ll need to re-set the initial state to its final state, e.g. opacity 0 to 1, or translateY offset to 0

Next remove this block of code

```auto
<style>
    /* page load flicker remove */
    html { opacity: 0; transition: opacity 0s ease-out; }
    html.webflow-loaded { opacity: 1; }
  </style>
  <script>
    var Webflow = Webflow || [];
    Webflow.push(function() {
      $('html').addClass('webflow-loaded');
    });
  </script>

```

The code is redundant and adds a second layer of hiding that interferes with the page-load animations. Intellimize already handles the flash of unstyled content with its own anti-flicker script

_Here’s an explanation on what is potentially happening:_

There’s a Intellimize Anti-Flicker + Webflow IX2 Timing Conflict  
Intellimize anti-flicker, which runs async, hides the page while the animation plays. Webflow IX2 fires your hero animation during this window. The animation runs and completes but since the page is invisible, the user never sees it. By the time Intellimize removes the class and the page becomes visible, the animation is already done and the hero text just appears static.

On scroll Webflow IX2’s `Scroll Into View` trigger causes a fresh intersection check, Intellimize has long since removed the anti-flicker class, so this time the animation fires visibly.

The page’s redundant flicker-removal pattern (the code with the `html { opacity: 0 }..`) creates a second layer of hiding on top of Intellimize. The two are racing against each other and against Webflow IX2’s animation timing.

Keep this code since it helps recalculate page height after marquee initializes

```auto
 window.FinsweetAttributes.push([
    'marquee',
    () => {
      requestAnimationFrame(() => {
        ScrollTrigger.refresh(); // recalculates after marquee changes page height
      });
    }
  ]);

```

---

<div class="post-metadata">

**Author:** ![luke2](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/luke2/32/5010_2.png) [@luke2](https://forum.finsweet.com/u/luke2)\
**Post date:** [May 26, 2026, 10:41pm UTC](https://forum.finsweet.com/t/marquee-component-is-blocking-text-animation-of-the-hero-component/7318/5 "2026-05-26T22:41:28Z")

</div>

I am having the same issue lately (component code update??). We are not using anything custom outside of webflow and the marquee. Pages with the marquee element, the hero does not animate until after user initiates scrolling. Pages without a marquee behave normally.

I am using the element trigger on the full section, with it sliding in from the bottom when scrolled into view. For the hero, this has normally been firing once the page loads since it is already in view.

Any guidance on how to solve this would be greatly appreciated!

---

<div class="post-metadata">

**Author:** ![jesse.muiruri](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/jesse.muiruri/32/5523_2.png) [@jesse.muiruri](https://forum.finsweet.com/u/jesse.muiruri)\
**Post date:** [May 27, 2026, 7:22am UTC](https://forum.finsweet.com/t/marquee-component-is-blocking-text-animation-of-the-hero-component/7318/6 "2026-05-27T07:22:34Z")

</div>

Hey @luke2

This has been noted and shared with the team, will keep y’all posted

Thanks

---

<div class="post-metadata">

**Author:** ![mark8](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/mark8/32/3671_2.png) [@mark8](https://forum.finsweet.com/u/mark8)\
**Post date:** [May 28, 2026, 7:53pm UTC](https://forum.finsweet.com/t/marquee-component-is-blocking-text-animation-of-the-hero-component/7318/7 "2026-05-28T19:53:59Z")

</div>

Thanks @jesse.muiruri appreciate the follow-up. Fingers crossed we have a fix soon.

---

<div class="post-metadata">

**Author:** ![jesse.muiruri](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/jesse.muiruri/32/5523_2.png) [@jesse.muiruri](https://forum.finsweet.com/u/jesse.muiruri)\
**Post date:** [May 29, 2026, 6:23pm UTC](https://forum.finsweet.com/t/marquee-component-is-blocking-text-animation-of-the-hero-component/7318/8 "2026-05-29T18:23:46Z")

</div>

Hey @mark8 @luke2

The issue should now be resolved, kindly check & let us know

Please note, try clear cache or load site on incognito while testing to be sure you are not working on a cached page

Thanks

---

<div class="post-metadata">

**Author:** ![mark8](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/mark8/32/3671_2.png) [@mark8](https://forum.finsweet.com/u/mark8)\
**Post date:** [June 1, 2026, 4:14pm UTC](https://forum.finsweet.com/t/marquee-component-is-blocking-text-animation-of-the-hero-component/7318/9 "2026-06-01T16:14:44Z")

</div>

Seems to be working for me @jesse.muiruri thank you!