diff --git a/web/src/components/sections/AnimationCollection.astro b/web/src/components/sections/AnimationCollection.astro new file mode 100644 index 0000000..b102bc3 --- /dev/null +++ b/web/src/components/sections/AnimationCollection.astro @@ -0,0 +1,211 @@ +--- +import { theme } from '../../data/theme.js' + +import CopyIcon from '@components/icons/copy.astro' + +const { animation, animationDuration, animationSteps, animationDelay } = theme + +const POPULAR_ANIMATIONS = [ + 'fade-in', + 'blurred-fade-in', + 'zoom-in', + 'slide-in-top', + 'bouncing', + 'pulsing', + 'shake', + 'tada', + 'jelly', + 'flip-horizontal', + 'swing', + 'wobble', + 'rotate-360', + 'fade-in-up', + 'slide-in-left', + 'zoom-out', + 'fade-in-down', + 'slide-in-bottom', + 'slide-in-right' +] + +const sortedAnimations = Object.keys(animation).sort((a, b) => { + const indexA = POPULAR_ANIMATIONS.indexOf(a) + const indexB = POPULAR_ANIMATIONS.indexOf(b) + + if (indexA === -1 && indexB === -1) return a.localeCompare(b) + if (indexA === -1) return 1 + if (indexB === -1) return -1 + return indexA - indexB +}) +--- + + +
+

+ Animation Collection +

+

+ Explore our comprehensive library of ready-to-use animations. Customize + duration, delay, and timing to fit your needs with zero configuration. +

+
+ +
+
+
+
+ Duration + +
+ +
+ Delay + +
+ +
+ Steps + +
+ + + + +
+
+ +
+ { + sortedAnimations.map((animationKey, index) => ( +
= 15 ? 'hidden' : ''}`} + data-class={animationKey} + style={`animation-delay: ${1000 + index * 50}ms; animation-fill-mode: both;`} + > +
+ + {animationKey} + + +
+ +
+
+
+
+ )) + } +
+ + { + sortedAnimations.length > 15 && ( +
+ +
+ ) + } +
diff --git a/web/src/components/sections/Preview.astro b/web/src/components/sections/Preview.astro new file mode 100644 index 0000000..12c29ec --- /dev/null +++ b/web/src/components/sections/Preview.astro @@ -0,0 +1,276 @@ +--- +import { Code } from 'astro:components' +import pkg from '../../../package.json' + +import CopyIcon from '@components/icons/copy.astro' +import Logo from '@components/ui/Logo.astro' + +const { version } = pkg + +const packageManagers = [ + { + name: 'npm', + icon: ``, + command: 'npm install tailwind-animations' + }, + { + name: 'pnpm', + icon: ``, + command: 'pnpm add tailwind-animations' + }, + { + name: 'yarn', + icon: ``, + command: 'yarn add tailwind-animations' + }, + { + name: 'bun', + icon: ``, + command: 'bun add tailwind-animations' + }, + { + name: 'deno', + icon: ``, + command: 'deno add tailwind-animations' + } +] +--- + + + +
+ +
+ + v{version} + +
+ + +
+ +
+
+ +

+ Tailwind Animations +

+
+

+ The easiest way to add stunning animations to your Tailwind CSS + projects. Zero configuration, pure performance. +

+ + +
+
+
+
+ { + packageManagers.map((pm, index) => ( + + )) + } +
+ +
+
+
+ + $ {packageManagers[0].command} + +
+
+
+ +
+
+
+ + +
+
+
+ How to use +
+ +
+
+
+
+ +
+ +
+
+
+
+ + +
+ +
+ +
+
+
+
+
+
+ demo_preview.html +
+
+ + +
+ +
+
+ + +
+ +
+
+
+
+ + +
+
+ <div + class=""> +
+
+ <!-- Applied animation --> +
+
+ </div> +
+
+
+ + +
+
+ +
+
+
+
+
diff --git a/web/src/components/sections/ScrollAnimation.astro b/web/src/components/sections/ScrollAnimation.astro new file mode 100644 index 0000000..8caf9f3 --- /dev/null +++ b/web/src/components/sections/ScrollAnimation.astro @@ -0,0 +1,153 @@ + + +
+
+

+ Scroll Animations +

+

+ Animate elements based on their position in the viewport using the timeline-view utility. +

+
+ +
+
+

+ Scroll down to see the magic +

+ +

+ To animate elements on scroll, we use the timeline-view utility. This property creates a View Timeline that allows you to synchronize + the animation with the element's displacement within the viewport. +

+ +

+ The animation is automatically linked to the element's visibility in the + viewport. Use animate-range to control + when the animation starts and ends relative to the element's visibility. +

+ +
+ I reveal on scroll + + timeline-view animate-zoom-in animate-range-cover + +
+ +

+ The animate-range property is essential + for defining when the animation starts and ends relative to the element's + visibility. You can use predefined ranges like gradual, moderate, brisk, or rapid to easily control the animation's + pace. +

+ +
+
+ Gradual (10% - 90%) + + animate-range-gradual + +
+
+ Moderate (20% - 80%) + + animate-range-moderate + +
+
+ Brisk (30% - 70%) + + animate-range-brisk + +
+
+ Rapid (40% - 60%) + + animate-range-rapid + +
+
+ +

+ Of course, you can also use custom values for more precision. By + specifying values like entry 10% or contain 25%, you can perfectly time the reveal effect to match your design's flow. +

+ +
+ I fade in from the left + + timeline-view animate-slide-in-left + animate-range-[entry_5%_contain_20%] + +
+ +

+ You can combine different directions and effects. Using animate-slide-in-left with a scroll timeline makes the element gracefully slide into place while + adjusting its opacity, synchronized with the user's scrolling speed for a + more interactive feel. +

+ +
+ I fade in with blur + + timeline-view animate-blurred-fade-in + animate-range-[entry_10%_contain_30%] + +
+ +

+ Blurred transitions like animate-blurred-fade-in add a layer of polish. By linking it to a scroll timeline, you create a + depth-of-field effect that naturally draws attention to the content as it + becomes clear and focused. +

+
+
+
diff --git a/web/src/components/sections/ScrollViewTimelines.astro b/web/src/components/sections/ScrollViewTimelines.astro new file mode 100644 index 0000000..be7a8dc --- /dev/null +++ b/web/src/components/sections/ScrollViewTimelines.astro @@ -0,0 +1,386 @@ + + +
+
+

+ Scroll & View Timelines +

+

+ Link animations to scroll progress or element visibility using powerful + timeline utilities. +

+
+ +
+
+ +
+

+ Vertical Scroll Progress +

+

+ Use timeline-scroll to link an animation + to the scroll container's progress. The animation advances as you scroll. +

+
+
+
+
+

+ ↓ Scroll down to see the progress bar fill +

+
+ { + [1, 2, 3].map(() => ( +
+ )) + } +
+
+
+ + timeline-scroll animate-expand-horizontally + +
+ + +
+

+ Horizontal Scroll Progress +

+

+ Use timeline-[scroll(inline)] + for horizontal scroll containers. The progress bar follows your horizontal + scrolling. +

+
+
+
+
+ { + ['🚀', '⭐', '💎', '🎯', '🔥', '✨', '🎨', '💡'].map((emoji) => ( +
+ {emoji} +
+ )) + } +
+
+ + timeline-[scroll(inline)] animate-expand-horizontally + +
+ + +
+

+ Entry & Exit Animation Ranges +

+

+ Control when animations play with animate-range-entry (entering viewport) and animate-range-exit (leaving viewport). +

+
+
+

+ ↓ Scroll to see entry/exit animations +

+
+
+ Entry Animation
Plays when entering +
+
+
+ Exit Animation
Plays when leaving +
+
+
+
+
+ + animate-range-entry + + + animate-range-exit + +
+
+ + +
+

+ Staggered Reveal Effect +

+

+ Combine timeline-view with different + animate-range + values to create a staggered reveal effect. +

+
+
+

+ ↓ Scroll to reveal cards in sequence +

+
+
+
+ First +
+
+ Second +
+
+ Third +
+
+ Fourth +
+
+
+
+
+ + animate-range-[entry_0%_cover_30%] → [entry_10%_cover_40%] → ... + +
+ + +
+

+ Rotation on Scroll +

+

+ Use animate-rotate-360 with + animate-range-cover to rotate elements + as they pass through the viewport. +

+
+
+

+ ↓ Scroll to spin the shapes +

+
+
+
+
+
+
+
+ 🎲 +
+
+
+
+
+
+ + animate-rotate-360 + + + animate-spin-clockwise + + + animate-flip-x + +
+
+ + +
+

+ Timeline Utilities Reference +

+

+ Available timeline utilities and how to use them: +

+
+
+ Scroll Timelines + timeline-scroll + timeline-[scroll(x)] + timeline-[scroll(y)] + timeline-[scroll(block)] + timeline-[scroll(inline)] +
+
+ View Timelines + timeline-view + timeline-[view(x)] + timeline-[view(y)] + timeline-[view(block)] + timeline-[view(inline)] +
+
+ Animation Ranges + animate-range-cover + animate-range-contain + animate-range-entry + animate-range-exit +
+
+ Preset Ranges + animate-range-gradual (10%-90%) + animate-range-moderate (20%-80%) + animate-range-brisk (30%-70%) + animate-range-rapid (40%-60%) +
+
+
+ + +
+

Arbitrary Values

+

+ Use brackets for custom values. Use underscores _ instead of spaces. +

+
+
+ Scroll with axis + timeline-[scroll(x_root)] + timeline-[scroll(y_nearest)] +
+
+ View with inset + timeline-[view(block)] + timeline-[view(x_200px_auto)] +
+
+ Custom animation ranges + animate-range-[entry_0%_cover_50%] + animate-range-[cover_25%_cover_75%] + animate-range-[exit_-10%_exit_100%] +
+
+
+
+
+
diff --git a/web/src/pages/index.astro b/web/src/pages/index.astro index ed56030..99b328a 100644 --- a/web/src/pages/index.astro +++ b/web/src/pages/index.astro @@ -1,30 +1,21 @@ --- import Layout from '@layouts/Layout.astro' -import pkg from '../../../package.json' import { theme } from '../data/theme.js' -/* -Las importaciones, se han organizado de la siguiente forma: -1. importacion de code. -2. importaciones de iconos. -3. importaciones de componentes UI. -4. importaciones de layout. -*/ - -import { Code } from 'astro:components' import CopyIcon from '@components/icons/copy.astro' -import Github from '@components/icons/github.astro' - -import Logo from '@components/ui/Logo.astro' -import ToggleTheme from '@components/ui/ToggleTheme.astro' -// Importacion de componentes de layout +// Import Components Layout import Footer from '@components/layout/Footer.astro' import Header from '@components/layout/Header.astro' +// Import Section +import Preview from '@components/sections/Preview.astro' +import AnimationCollection from '@components/sections/AnimationCollection.astro' +import ScrollAnimation from '@components/sections/ScrollAnimation.astro' +import ScrollViewTimelines from '@components/sections/ScrollViewTimelines.astro' + const { animation, animationDuration, animationSteps, animationDelay } = theme -const { version } = pkg const POPULAR_ANIMATIONS = [ 'fade-in', @@ -57,1035 +48,31 @@ const sortedAnimations = Object.keys(animation).sort((a, b) => { if (indexB === -1) return -1 return indexA - indexB }) - -const packageManagers = [ - { - name: 'npm', - icon: ``, - command: 'npm install tailwind-animations' - }, - { - name: 'pnpm', - icon: ``, - command: 'pnpm add tailwind-animations' - }, - { - name: 'yarn', - icon: ``, - command: 'yarn add tailwind-animations' - }, - { - name: 'bun', - icon: ``, - command: 'bun add tailwind-animations' - }, - { - name: 'deno', - icon: ``, - command: 'deno add tailwind-animations' - } -] --- -
-
- -
- - v{version} - -
- - -
- -
-
- -

- Tailwind Animations -

-
-

- The easiest way to add stunning animations to your Tailwind CSS - projects. Zero configuration, pure performance. -

- - -
-
-
-
- { - packageManagers.map((pm, index) => ( - - )) - } -
- -
-
-
- - $ {packageManagers[0].command} - -
-
-
- -
-
-
- - -
-
-
- How to use -
- -
-
-
-
- -
- -
-
-
-
- - -
- -
- -
-
-
-
-
-
- demo_preview.html -
-
- - -
- -
-
- - -
- -
-
-
-
- - -
-
- <div - class=""> -
-
- <!-- Applied animation --> -
-
- </div> -
-
-
- - -
-
- -
-
-
-
-
+
-
-

- Animation Collection -

-

- Explore our comprehensive library of ready-to-use animations. - Customize duration, delay, and timing to fit your needs with zero - configuration. -

-
- -
- -
-
-
- Duration - -
- -
- Delay - -
- -
- Steps - -
+ + - + + - -
-
- -
- { - sortedAnimations.map((animationKey, index) => ( -
= 15 ? 'hidden' : ''}`} - data-class={animationKey} - style={`animation-delay: ${1000 + index * 50}ms; animation-fill-mode: both;`} - > -
- - {animationKey} - - -
- -
-
-
-
- )) - } -
- - { - sortedAnimations.length > 15 && ( -
- -
- ) - } -
- -
-
-

- Scroll Animations -

-

- Animate elements based on their position in the viewport using the timeline-view utility. -

-
- -
-
-

- Scroll down to see the magic -

- -

- To animate elements on scroll, we use the timeline-view utility. This property creates a View Timeline that allows you to - synchronize the animation with the element's displacement within the - viewport. -

- -

- The animation is automatically linked to the element's visibility - in the viewport. Use animate-range to control when the animation starts and ends relative to the element's - visibility. -

- -
- I reveal on scroll - - timeline-view animate-zoom-in animate-range-cover - -
- -

- The animate-range property is essential - for defining when the animation starts and ends relative to the element's - visibility. You can use predefined ranges like gradual, moderate, brisk, or rapid to easily control the - animation's pace. -

- -
-
- Gradual (10% - 90%) - - animate-range-gradual - -
-
- Moderate (20% - 80%) - - animate-range-moderate - -
-
- Brisk (30% - 70%) - - animate-range-brisk - -
-
- Rapid (40% - 60%) - - animate-range-rapid - -
-
- -

- Of course, you can also use custom values for more precision. By - specifying values like entry 10% or contain 25%, you can - perfectly time the reveal effect to match your design's flow. -

- -
- I fade in from the left - - timeline-view animate-slide-in-left - animate-range-[entry_5%_contain_20%] - -
- -

- You can combine different directions and effects. Using animate-slide-in-left with a scroll timeline makes the element gracefully slide into place - while adjusting its opacity, synchronized with the user's scrolling - speed for a more interactive feel. -

- -
- I fade in with blur - - timeline-view animate-blurred-fade-in - animate-range-[entry_10%_contain_30%] - -
- -

- Blurred transitions like animate-blurred-fade-in add a layer of polish. By linking it to a scroll timeline, you create - a depth-of-field effect that naturally draws attention to the content - as it becomes clear and focused. -

-
-
-
- -
-
-

- Scroll & View Timelines -

-

- Link animations to scroll progress or element visibility using - powerful timeline utilities. -

-
- -
-
- -
-

- Vertical Scroll Progress -

-

- Use timeline-scroll to link an - animation to the scroll container's progress. The animation advances - as you scroll. -

-
-
-
-
-

- ↓ Scroll down to see the progress bar fill -

-
- { - [1, 2, 3].map(() => ( -
- )) - } -
-
-
- - timeline-scroll animate-expand-horizontally - -
- - -
-

- Horizontal Scroll Progress -

-

- Use timeline-[scroll(inline)] - for horizontal scroll containers. The progress bar follows your horizontal - scrolling. -

-
-
-
-
- { - ['🚀', '⭐', '💎', '🎯', '🔥', '✨', '🎨', '💡'].map( - (emoji) => ( -
- {emoji} -
- ) - ) - } -
-
- - timeline-[scroll(inline)] animate-expand-horizontally - -
- - -
-

- Entry & Exit Animation Ranges -

-

- Control when animations play with animate-range-entry (entering viewport) and animate-range-exit (leaving viewport). -

-
-
-

- ↓ Scroll to see entry/exit animations -

-
-
- Entry Animation
Plays when entering -
-
-
- Exit Animation
Plays when leaving -
-
-
-
-
- - animate-range-entry - - - animate-range-exit - -
-
- - -
-

- Staggered Reveal Effect -

-

- Combine timeline-view with different - animate-range - values to create a staggered reveal effect. -

-
-
-

- ↓ Scroll to reveal cards in sequence -

-
-
-
- First -
-
- Second -
-
- Third -
-
- Fourth -
-
-
-
-
- - animate-range-[entry_0%_cover_30%] → [entry_10%_cover_40%] → ... - -
- - -
-

- Rotation on Scroll -

-

- Use animate-rotate-360 with - animate-range-cover to rotate elements - as they pass through the viewport. -

-
-
-

- ↓ Scroll to spin the shapes -

-
-
-
-
-
-
-
- 🎲 -
-
-
-
-
-
- - animate-rotate-360 - - - animate-spin-clockwise - - - animate-flip-x - -
-
- - -
-

- Timeline Utilities Reference -

-

- Available timeline utilities and how to use them: -

-
-
- Scroll Timelines - timeline-scroll - timeline-[scroll(x)] - timeline-[scroll(y)] - timeline-[scroll(block)] - timeline-[scroll(inline)] -
-
- View Timelines - timeline-view - timeline-[view(x)] - timeline-[view(y)] - timeline-[view(block)] - timeline-[view(inline)] -
-
- Animation Ranges - animate-range-cover - animate-range-contain - animate-range-entry - animate-range-exit -
-
- Preset Ranges - animate-range-gradual (10%-90%) - animate-range-moderate (20%-80%) - animate-range-brisk (30%-70%) - animate-range-rapid (40%-60%) -
-
-
- - -
-

- Arbitrary Values -

-

- Use brackets for custom values. Use underscores _ instead of spaces. -

-
-
- Scroll with axis - timeline-[scroll(x_root)] - timeline-[scroll(y_nearest)] -
-
- View with inset - timeline-[view(block)] - timeline-[view(x_200px_auto)] -
-
- Custom animation ranges - animate-range-[entry_0%_cover_50%] - animate-range-[cover_25%_cover_75%] - animate-range-[exit_-10%_exit_100%] -
-
-
-
-
-
- -
+ +
+