forked from emre/www_projectmycelium_com
sasha-astiadi
0324b2e8ad
- Added infinite-scroll animation with translateX from 0 to -50% - Animation supports horizontal scrolling effects for carousel/ticker components
58 lines
1.5 KiB
JavaScript
58 lines
1.5 KiB
JavaScript
/** @type {import('tailwindcss').Config} */
|
|
export default {
|
|
darkMode: 'class',
|
|
content: [
|
|
"./index.html",
|
|
"./src/**/*.{js,ts,jsx,tsx}",
|
|
],
|
|
theme: {
|
|
extend: {
|
|
fontFamily: {
|
|
sans: ['Mulish', 'system-ui', 'Avenir', 'Helvetica', 'Arial', 'sans-serif'],
|
|
},
|
|
keyframes: {
|
|
scroll: {
|
|
to: {
|
|
transform: "translate(calc(-100% - var(--gap)))",
|
|
},
|
|
},
|
|
logoScroll: {
|
|
'0%': { transform: 'translateX(0)' },
|
|
'100%': { transform: 'translateX(-50%)' },
|
|
},
|
|
'glitch-1': {
|
|
'0%': { transform: 'none' },
|
|
'25%': { transform: 'skew(-0.5deg, -0.5deg)' },
|
|
'50%': { transform: 'none' },
|
|
'75%': { transform: 'skew(0.5deg, 0.5deg)' },
|
|
'100%': { transform: 'none' },
|
|
},
|
|
'glitch-2': {
|
|
'0%': { transform: 'none' },
|
|
'25%': { transform: 'skew(-0.5deg, -0.5deg)' },
|
|
'50%': { transform: 'none' },
|
|
'75%': { transform: 'skew(0.5deg, 0.5deg)' },
|
|
'100%': { transform: 'none' },
|
|
},
|
|
},
|
|
animation: {
|
|
scroll:
|
|
"scroll var(--animation-duration, 40s) var(--animation-direction, forwards) linear infinite",
|
|
logoScroll: 'logoScroll 16s linear infinite',
|
|
'glitch-1': 'glitch-1 1s infinite',
|
|
'glitch-2': 'glitch-2 1s infinite',
|
|
},
|
|
infinite-scroll {
|
|
0% {
|
|
transform: translateX(0);
|
|
}
|
|
100% {
|
|
transform: translateX(-50%);
|
|
}
|
|
}
|
|
|
|
},
|
|
},
|
|
plugins: [],
|
|
}
|