Marquee component is blocking text animation of the hero component

Finsweet Components
1

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

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.

2

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

 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

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

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

4

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

<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

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

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!

6

Hey @luke2

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

Thanks

7

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

8

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

9

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