Update docu to use no-animations:, change code,

Author: Adam Plesnik

README.md

@@ -1,5 +1,5 @@
 # Tailwind Job Application Microsite
 
-`experimental` `chrome 115+`
+`experimental` `chrome 116+`
 
 This is a microsite to introduce myself and give a short explanation with demo of how I'd tackle the scroll-driven animations plugin for Tailwind CSS.

package.json

@@ -28,7 +28,7 @@
     "react-router-dom": "^6.22.3"
   },
   "devDependencies": {
-    "@adam.plesnik/tailwindcss-scroll-driven-animations": "^0.2.1",
+    "@adam.plesnik/tailwindcss-scroll-driven-animations": "^0.2.5",
     "@types/node": "^20.11.30",
     "@types/prismjs": "^1.26.3",
     "@types/react": "^18.2.66",

src/demos/RangeDemo.tsx

@@ -9,13 +9,13 @@ const skeletonCollection = ['96%', '100%', '92%', '100%', '93%', '87%', '55%']
 const RangeDemo = () => {
   return (
     <DemoWrapper>
-      <div className="text-sm scope/navbar supports-animations:-mt-14 supports-animations:sm:-mt-8">
-        <div className="sticky top-0 z-10 flex animate-translate-down flex-wrap gap-1 bg-sky-400/60 p-4 backdrop-blur timeline/navbar range-on-exit supports-animations:-translate-y-16 dark:bg-fuchsia-600/60 ">
+      <div className="no-animations:mt-0 -mt-14 text-sm scope/navbar sm:-mt-8">
+        <div className="no-animations:translate-y-0 sticky top-0 z-10 flex -translate-y-16 animate-translate-down flex-wrap gap-1 bg-sky-400/60 p-4 backdrop-blur timeline/navbar range-on-exit dark:bg-fuchsia-600/60 ">
           <Code>.animate...</Code>
           <Code>.timeline/navbar</Code>
           <Code>.range-on-exit</Code>
         </div>
-        <div className="mt-4 px-4 sm:px-8">
+        <div className="no-animations:mt-12 mt-4 px-4 sm:px-8">
           <Code>.scope/navbar</Code>
         </div>
         <DemoPlaceholderContent>

src/docs/Docs.tsx

@@ -1,3 +1,4 @@
+import Code from '../components/Code'
 import CodeBlock from '../components/CodeBlock'
 import Heading from '../components/Heading'
 import Paragraph from '../components/Paragraph'
@@ -39,6 +40,10 @@ const viewTimelineClasses = [
   { className: 'view-timeline-block/{name}', code: 'view-timeline: --{name} block' },
 ]
 
+const supportsClasses = [
+  { className: 'no-animations:...', code: '@supports not (animation-range: cover) { ... }' },
+]
+
 const Docs = () => {
   return (
     <div>
@@ -92,6 +97,14 @@ const Docs = () => {
         Timeline scope allows to control animations outside the element which defines the timeline.
       </Paragraph>
       <DocsTable items={scopeClasses} />
+      <Heading size={3} id="documentation-fallback">
+        Fallback Styling
+      </Heading>
+      <Paragraph>
+        Use the modifier <Code>no-animations:</Code> to apply fallback styling in browsers which do
+        not support scroll-driven animations yet.
+      </Paragraph>
+      <DocsTable items={supportsClasses} />
     </div>
   )
 }

src/partials/Animations.tsx

@@ -110,15 +110,16 @@ const Animations = () => {
       </CodeBlock>
       <Heading size={3}>Browser Support</Heading>
       <Paragraph>
-        Scroll-driven animations are not broadly supported yet. I added two <Code>@supports</Code>{' '}
-        rules to use them as modifiers for fallback styling.
+        Scroll-driven animations are not broadly supported yet. I decided to apply an
+        animation-first approach. Use a modifier <Code>no-animations</Code>
+        for fallback styling.
       </Paragraph>
       <CodeBlock
         Icon={Github}
         linkHref={
-          'https://github.com/adamplesnik/tailwind-job-application/blob/main/tailwind.config.js#L28'
+          'https://github.com/adamplesnik/tailwindcss-scroll-driven-animations/blob/main/src/index.ts#L73'
         }
-        linkText={'tailwind-job-application/tailwind.config.js'}
+        linkText={'tailwindcss-scroll-driven-animations/src/index.ts'}
       >
         {codeExampleSupports}
       </CodeBlock>

src/partials/Nav.tsx

@@ -4,11 +4,7 @@ import HeaderNavAnchor from '../components/HeaderNavAnchor.tsx'
 
 const Nav = () => {
   return (
-    <div
-      className="sticky top-0 z-20 flex w-full animate-translate-down items-stretch justify-center border-b border-b-slate-200/50 bg-white/20 p-1 text-zinc-800 shadow-lg
-        backdrop-blur-sm timeline range/0%,200px supports-animations:-translate-y-24 md:px-1 supports-animations:md:-translate-y-32 supports-animations:lg:-translate-y-40 dark:border-b-slate-600/50
-        dark:bg-slate-800/60 dark:text-zinc-300"
-    >
+    <div className="no-animations:translate-y-0 sticky top-0 z-20 flex w-full -translate-y-24 animate-translate-down items-stretch justify-center border-b border-b-slate-200/50 bg-white/20 text-zinc-800 shadow-lg backdrop-blur-sm timeline range/0%,200px dark:border-b-slate-600/50 dark:bg-slate-800/60 dark:text-zinc-300">
       <div className="flex w-full max-w-screen-lg items-stretch gap-2 px-8 py-2 md:px-16 lg:px-20">
         <HeaderNavAnchor to="/#plugin">Plugin</HeaderNavAnchor>
         <HeaderNavAnchor to="/docs#documentation">Docs</HeaderNavAnchor>

src/utils/codeExamples.ts

@@ -41,7 +41,4 @@ export const codeExampleScope = `scope: (value, { modifier }) => ({
   timelineScope: \`--\${modifier}\`,
 }),`
 
-export const codeExampleSupports = `supports: {
-  animations: 'animation-timeline: scroll(y)',
-  'no-animations': 'not(animation-timeline: scroll(y))',
-}`
+export const codeExampleSupports = `addVariant('no-animations', '@supports not (animation-range: cover)')`

src/views/DocsView.tsx

@@ -12,7 +12,7 @@ const DocsView = () => {
       <Paragraph size="small" className="opacity-50">
         Tailwind CSS Plugin
       </Paragraph>
-      <div className="mt-12 hidden gap-4 rounded-lg border border-amber-400 bg-amber-50 p-4 text-sm supports-no-animations:flex dark:border-amber-600 dark:bg-stone-700/30">
+      <div className="no-animations:flex mt-12 hidden gap-4 rounded-lg border border-amber-400 bg-amber-50 p-4 text-sm dark:border-amber-600 dark:bg-stone-700/30">
         <WandSparkles
           className="size-6 shrink-0 text-amber-500 dark:text-amber-600"
           strokeWidth="1"

tailwind.config.js

@@ -27,7 +27,6 @@ module.exports = {
     },
     supports: {
       animations: 'animation-timeline: scroll(y)',
-      'no-animations': 'not(animation-timeline: scroll(y))',
     },
   },
   plugins: [require('@adam.plesnik/tailwindcss-scroll-driven-animations')],