Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

#

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

Jump to bottom

Issue Integrating scroll-timeline with Next.js #240

Open
dawidk92 opened this issue Feb 9, 2024 · 6 comments
Open

Issue Integrating scroll-timeline with Next.js #240

dawidk92 opened this issue Feb 9, 2024 · 6 comments

Comments

@dawidk92
Copy link

dawidk92 commented Feb 9, 2024

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

  1. In the pages/_app.tsx file of a Next.js project, import Script from next/script.
  2. Include the scroll-timeline polyfill using the Script tag as follows: 
    <Script src="https://flackr.github.io/scroll-timeline/dist/scroll-timeline.js" />
  3. 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
Copy link
Collaborator

bramus commented Feb 9, 2024

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 #78

@dawidk92
Copy link
Author

dawidk92 commented Feb 9, 2024

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
Copy link

gaurangrshah commented Feb 25, 2024 •
edited
Loading

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 bramus mentioned this issue Mar 14, 2024
Open
@padms padms mentioned this issue Mar 19, 2024
Closed
@bramus
Copy link
Collaborator

bramus commented Apr 18, 2024

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

@bramus bramus mentioned this issue Apr 18, 2024
Closed
@flackr
Copy link
Owner

flackr commented Apr 18, 2024

I put some ideas on #260 for how we could handle loading the polyfill asynchronously and still detect existing or already finished css animations.

@pdiazgenuinebee
Copy link

Did any of you guys managed to get it working on nextJS?

# for free to join this conversation on GitHub. Already have an account? # to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@bramus @flackr @gaurangrshah @dawidk92 @pdiazgenuinebee