I want to give click effect to a button like this:
.btn-translate-effect {
transition: transform .1s ease-in-out;
}
.btn-translate-effect:active {
transform: translateY(3px);
}
with tailwind utility classes.
But I'm not able to it figure it out. I tried this:
<button class="transform active:translate-y-4"></button>
It doesn't work. I also modified variant config tailwind.config.js like this:
variants: {
extend: {
transform: ['active']
},
}
But to no avail.
You need to replace transform with translate on tailwind config.
variants: {
translate: ['active'],
},
Working Example
Related
I'm trying to create an animation of a spinning svg as a loader,
checking online I've seen some examples of doing it with Styled component, which is deprecated.
Been wondering if you guys have a suggestion?
I tried adding an '#keyframes spin' property to my SX but it didn't do anything, I.E:
<Box
sx={{
animation: '$test 1s linear infinite',
'#keyframes spin': {
from: {
transform: 'rotate(0dg)'
},
to: {
transform: 'rotate(360dg)'
}
}
}}
>
I tried creating an animation with SX property of MUI v5 with the same logic as Styled component
but failed :(
I wonder if we can achieve it without using a CSS file & a class...
With MUI5 it's works just fine when add keyframes on SX props
Here is my example
<Box sx={{
"#keyframes width-increase": {
"0%": {
width: "100px"
},
"100%": {
width: "300px"
}
},
width: "100px",
height: "50px",
backgroundColor: "red",
animation: "width-increase 1s ease infinite",
}}></Box>
Make sure you init keyframes before use.
Hope this will help you...
Is it possible to pass a value from html to the tailwind.config.js file?
I essentially want to do something similar to how we can pass a value from HTML to CSS using use custom properties. But instead passing it to the tailwind.config.js file.
For example, with HTML and CSS you can do:
.fill-color {
color: var(--color);
}
<div class="fill-color" style="--color: blue;">Test</div>
but in my project I need to pass in a variable like: 20 from the index.html file:
<div class="scroll" style="--variable-number: 20">Test</div>
So I can use it to set the keyframes percentage correctly: Tailwind.config.js file below
module.exports = {
extend: {
animation: {
scroll: 'scroll 25s linear infinite'
}
},
keyframes: {
scroll: {
'0%': {transform: 'translateX(0%)'},
'100%': {transform: 'translateX(NEED 20 VALUE HERE%)' },
}
},
}
Yes, you can do what you want to achieve, see this playground for a working example. Just add var(--percentage) to the translateX.
HTML:
<div class="animate-text-scroll" style="--percentage: 20%">Test</div>
Tailwind config:
module.exports = {
theme: {
extend: {
keyframes: {
'scroll': {
'0%': { transform: 'translateX(0)' },
'100%': { transform: 'translateX(var(--percentage))' },
},
},
animation: {
'text-scroll': 'scroll 2s linear infinite',
},
},
},
plugins: [],
}
Hope this helps.
You can achieve this using custom css variable and arbitrary values.
Heres a demo: https://play.tailwindcss.com/qEqKUVP8IQ
Whats happening:
First we define our custom keyframes and animation in the config. allowing it to read a css var like so:
extend: {
keyframes: {
scroll: {
'0%': {transform: 'translateX(0)'},
'100%': {transform: 'translateX(var(--scroll-distance))' },
}
},
animation: {
scroll: 'scroll 1s linear infinite'
},
},
then we can use arbitrary values in our class naming like so:
<div class="animate-scroll [--scroll-distance:20px]">Test</div>
<div class="animate-scroll [--scroll-distance:50px]">Test</div>
So same animation, but a custom distance on multiple elements.
The other option is to define a default value in the css file like so:
:root {--new-variable: red;}
and use it on an element
<div class="bg-[color:var(--new-variable)]">Test</div>
Hope that helps.
I am trying to work with Tailwind CSS, where currently now I am trying to animate a background image. I tried different methods but have not yet figured out how to animate the background image in single direction from left to right.
Here is what I have done so far.
Added a custom background image
Added a repeat so that it fills the area.
What additionally I want to do, is show it like an animation, so it feels like it's moving. I had already implemented it in normal CSS but can't put it in Tailwind.
Following is the video for the animation that has been achieved in normal CSS: https://youtu.be/Jx8fg2MdG3Y
Following is the Tailwind playground for the background I have implemented so far: https://play.tailwindcss.com/jmoPHTdXAe
Current implemented code in Tailwind.
<div class="p-6 bg-gray-500 flex flex-col items-center min-h-screen justify-center bg-hero-pattern bg-repeat animate-ltr-linear-infinite">
<div class="text-white">
<h1 class="text-6xl">Some Text HERE</h1>
<h1 class="text-2xl">Background Not Animating</h1>
</div>
</div>
The following is the configuration I have tried so far in Tailwind.
theme: {
extend:{
backgroundImage: theme => ({
'hero-pattern': "url('img/bg.png')"
}),
animation:{
'ltr-linear-infinite': 'normal 100s linear infinite'
}
}
}
Following is the image I am using for repeat:
https://i.ibb.co/Qn5BR8N/bg.png
The problem
I couldn't see animation in your code. I see just the "timing-function".
Writing this:
animation: {
'ltr-linear-infinite': 'normal 100s linear infinite'
}
You tell Tailwind what he should define animation class like this:
.ltr-linear-infinite {
animation: normal 100s linear infinite;
}
It of course wouldn't work properly — there is no #keyframes normal.
The solution
Citation from docs:
To add new animation #keyframes, use the keyframes section of your theme configuration:
// tailwind.config.js
module.exports = {
theme: {
extend: {
keyframes: {
wiggle: {
'0%, 100%': { transform: 'rotate(-3deg)' },
'50%': { transform: 'rotate(3deg)' },
}
}
}
}
}
So, in your case it would be like this:
module.exports = {
theme: {
extend: {
// Define pattern
backgroundImage: theme => ({
'hero-pattern': "url('img/bg.png')"
}),
// Define animation class
animation: {
'ltr-linear-infinite': 'move-bg 10s linear infinite',
},
// Define keyframes
keyframes: {
'move-bg': {
'0%': { 'background-position': '0 0' },
'100%': { 'background-position': '256px 0'}
}
}
}
}
}
P.S. 100s makes background to move ~2.5px/s. Perhaps it is too slow, so I changed it to ~25px/s.
I had to add keyframes in the configuration of tailwind as well. to make it work.
following is the Working EXAMPLE
This is the updated code for reference if anyone needs in future.
theme: {
extend: {
backgroundImage: (theme) => ({
'hero-pattern': "url('https://i.ibb.co/Qn5BR8N/bg.png')",
}),
animation: {
'ltr-linear-infinite': 'ltr-linear-infinite 100s linear infinite',
},
keyframes: {
'ltr-linear-infinite': {
'from': { 'background-position': '0 0' },
'to': { 'background-position': '400% 0%' },
},
},
}
}
I have an element which should render when the page is loaded:
{this.state.pageLoaded && <MyComponent className={classes.container} /> }
When this component is rendered I would like for it to fade in. So I am trying to apply some jss, but can't get it quite work.
This is my JSS:
const styles = theme => ({
'#keyframes fadein': {
from: { opacity: 0 },
to : { opacity: 1 }
},
/* Firefox < 16 */
'#-moz-keyframes fadein': {
from: { opacity: 0 },
to : { opacity: 1 }
},
/* Safari, Chrome and Opera > 12.1 */
'#-webkit-keyframes fadein': {
from: { opacity: 0 },
to : { opacity: 1 }
},
/* Internet Explorer */
'#-ms-keyframes fadein': {
from: { opacity: 0 },
to : { opacity: 1 }
},
/* Opera < 12.1 */
'#-o-keyframes fadein': {
from: { opacity: 0 },
to : { opacity: 1 }
},
container: {
//How do I insert like -webkit-animation in here????
animation: '$fadein',
},
});
I do not know if my syntax is correct as I am confused with how to apply things with special character like #keyframes, --webkit-animation, etc... so that different browsers will work.
When I run the page no animations happen and I get the following warninings in my console:
Warning: [JSS] Unknown rule #-moz-keyframes fadein
Warning: [JSS] Unknown rule #-webkit-keyframes fadein
Warning: [JSS] Unknown rule #-ms-keyframes fadein
Warning: [JSS] Unknown rule #-o-keyframes fadein
To achieve this in JSS, you need to declare a key-frames property to your styles object like so;
export default ({
'#keyframes ring': {
from: {
transform: 'rotate(0deg)',
},
to: {
transform: 'rotate(360deg)',
},
},
someClassName: {
animationDelay: '-0.2s',
animationDuration: '1s',
animationIterationCount: 'infinite',
animationName: '$ring', <-- HERE IS HOW YOU REFERENCE TO IT
animationTimingFunction: 'cubic-bezier(0.5, 0, 0.5, 1)',
},
});
You can apply this effect with some css.
.fade-in {
animation: fade-in 2s;
}
#keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
Just add fade-in className to your component and add this code to your css file.
Since you do not want to use css. You may save some time by adding something like http://react-animations.herokuapp.com/ or https://digital-flowers.github.io/react-animated-css.html to your app.
By following the documentation you can add animations to your react project.
I would go this route if you are unwilling to add css or sass to the project.
I have a component that gets unmounted after ten seconds, and I just can't seem to get the leave-animations working with React CSSTransitionGroup. The appear classes gets added when the component mounts and those animations work well. However, the leave classes never gets added to the component on unmount. I've found several working jsfiddle examples, but the code doesn't work for me. I'm new to React so I'm hoping that someone can point me in the right direction. I've set the timeouts to be able to see if the classes gets added.
Main component:
this.state = {
renderBlankSlate: true,
//the rest of the initial state..
}
// This unmounts the component
componentDidMount() {
this.interval = setTimeout(() => this.setState({renderBlankSlate: false}), 10000);
}
{ this.state.renderBlankSlate ?
<ReactCSSTransisionGroup
component="div"
transitionName="slide"
transitionEnterTimeout={ 500 }
transitionAppear={ true }
transitionAppearTimeout={ 2000 }
transitionLeaveTimeout={ 5000 }
>
<BlankSlate />
</ReactCSSTransisionGroup>
: null }
CSS:
.slide-appear {
transform: translateX(110%);
height: 0;
opacity: 0;
}
.slide-appear.slide-appear-active {
transform: translateX(0);
height: 100%;
opacity: 1;
transition: all 2s ease-in;
}
.slide-leave {
transform: translateX(0);
}
.slide-leave.slide-leave-active {
transform: translateX(110%);
transition: 5s ease-in;
}
You probably want to add that ternary within the transition group.
<ReactCSSTransitionGroup
component="div"
transitionName="slide"
transitionEnterTimeout={ 500 }
transitionAppear={ true }
transitionAppearTimeout={ 2000 }
transitionLeaveTimeout={ 5000 }
>
{this.state.renderBlankSlate ? <BlankSlate /> : null}
</ReactCSSTransitionGroup>
The reason your leave animation isn't firing is because the Transition group is leaving as well