Skip to content
New issue

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

Sign up for GitHub

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

Already on GitHub? Sign in to your account

Jump to bottom

index.js:29 Non-Inline StyleSheets detected: ScrollTimeline polyfill currently only supports inline styles within style tags #104

Closed
TomPeak opened this issue Dec 12, 2022 · 2 comments
Closed

index.js:29 Non-Inline StyleSheets detected: ScrollTimeline polyfill currently only supports inline styles within style tags #104

TomPeak opened this issue Dec 12, 2022 · 2 comments

Comments

@TomPeak
Copy link

TomPeak commented Dec 12, 2022 •
edited
Loading 

<!doctype html>
<html lang="en">
	<head>
<script type="text/javascript" src="https://flackr.github.io/scroll-timeline/dist/scroll-timeline.js"></script>
</head>
<body heigh="300vh">
	<div>
<svg id="enCOL3QZM1s1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 300 300" shape-rendering="geometricPrecision" text-rendering="geometricPrecision">
<g><g><path d="M199.4,26c-15.3-6.1-32-9.5-49.4-9.5C76.3,16.5,16.5,76.3,16.5,150c0,17.5,3.4,34.2,9.5,49.4" transform="translate(-.6 3.85)" fill="#fff" stroke="#000" stroke-width="28" stroke-miterlimit="10" stroke-dashoffset="7" stroke-dasharray="100,0"/><path d="M100.6,274c15.3,6.1,32,9.5,49.4,9.5c73.7,0,133.5-59.8,133.5-133.5c0-17.5-3.4-34.2-9.5-49.4" fill="#fff" stroke="#000" stroke-width="28" stroke-miterlimit="10"/></g><g><g id="eck_open" transform="translate(142.049995,156.349998)"><polyline points="182.4,196.7 182.4,116 101.7,116" transform="translate(-142.049995,-156.349998)" fill="none" stroke="#000" stroke-width="28" stroke-miterlimit="10"/></g><g id="enCOL3QZM1s8_to" transform="translate(155.950001,143.150002)"><polyline points="115.6,102.8 115.6,183.5 196.3,183.5" transform="translate(-155.950001,-143.150002)" fill="none" stroke="#000" stroke-width="28" stroke-miterlimit="10"/></g></g></g></svg></div>
<script>


document.getElementById('eck_oben').animate(
    { transform: ['translateY(0)', 'translateY(100px)']},
    { duration: 10000, // Totally arbitrary!
      fill: 'both',
      timeline: new ScrollTimeline({
          scrollOffsets: [
              new CSSUnitValue(0, 'px'),
              new CSSUnitValue(200, 'px')
          ]
      })
    });</script>
</body>
</html>

This is my code and I get this error. Actually I need die polyfill in react. Want to animate the SVG file by scrolling.
What do I wrong? Also get this obvious error: Uncaught TypeError: Cannot read properties of null (reading 'animate')
at anim_logo.html:13:36. Try a lot now. This the body height should be endless. I it worked with a weird link von codepen or something. There I came on this library. The text horizontal progress bar. This URL was working without this error and I did it in CSS.

Please help,

tom

PS: I tried in react by my self but it doesn't work well … enabled.io
@bramus
Copy link
Collaborator

bramus commented Aug 17, 2023

The code snippet you have provided is using an outdated syntax. Please refer to https://developer.chrome.com/articles/scroll-driven-animations/ or https://scroll-driven-animations.style/ for code that uses the latest syntax.

(Side note: I guess you got that code from the demos / README that is included in this repo. These are out of date. #122 is a PR to fix that.)

@bramus
Copy link
Collaborator

bramus commented Aug 31, 2023

As for the “Non-Inline StyleSheets detected” warning, that’s tracked in #78.

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

No branches or pull requests
3 participants
@bramus @TomPeak @kevers-google