Issue Integrating scroll-timeline with Next.js

dawidk92 commented 4 months ago

Environment

Next.js version: 13.5.6
Browser: Safari on iOS 17.3

Description

I'm encountering an issue integrating the scroll-timeline polyfill into my Next.js project, aiming to enable scroll-linked animations using CSS Scroll Timeline. Despite correctly importing the script in my pages/_app.tsx file, the polyfill does not activate, and animations linked to scroll or view timelines do not trigger as expected.

Steps to Reproduce

In the pages/_app.tsx file of a Next.js project, import Script from next/script.

Include the scroll-timeline polyfill using the Script tag as follows:

<Script src="https://flackr.github.io/scroll-timeline/dist/scroll-timeline.js" />

In the CSS, use the properties animation-timeline: scroll(); and animation-timeline: view(); to define scroll-linked animations.

Expected Result:

The polyfill should enable the specified animations to react to scroll and view changes.

Actual Result:

Neither animation-timeline: scroll(); nor animation-timeline: view(); have any effect, and the expected animations do not occur.

Attempted Solutions

Checked for script loading issues via the network tab in the browser's developer tools, confirming the script loads successfully.
No console errors related to script loading or execution were observed.

Any assistance or insights into resolving this integration issue would be greatly appreciated. Thank you!

bramus commented 4 months ago

Where do you define your styles? The polyfill – currently - only works with rules present in inlined style blocks.

Don’t work:

style attribute
external style sheets (<link rel="stylesheet" …>

The latter is tracked in https://github.com/flackr/scroll-timeline/issues/78

dawidk92 commented 4 months ago

I'm using Next.js with styled-components for styling.

Styles are dynamically generated and injected into the <style> tag within the <head> tag of the document. This setup should, in theory, align with the requirement for inlined style blocks as the styles are not applied via the style attribute directly on elements nor through external style sheets linked via <link rel="stylesheet" href="...">.

Here you can find an example of this kind of setup: https://github.com/vercel/next.js/tree/canary/examples/with-styled-components

gaurangrshah commented 4 months ago

I'm having the same issue can confirm the polyfill has no effect in a brand new next.js project

      <Script async src="https://flackr.github.io/scroll-timeline/dist/scroll-timeline.js" />

Put that into my layout component, and it seems to have no effect.

I've successfully used this previously in an Astro project, with no issues. Would really love to get this working in next.js!!

bramus commented 2 months ago

The polyfill can’t be loaded using async as it needs to catch the animations starting.

flackr commented 2 months ago

I put some ideas on https://github.com/flackr/scroll-timeline/issues/260 for how we could handle loading the polyfill asynchronously and still detect existing or already finished css animations.

flackr / scroll-timeline