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...
Related
I'm trying to show more details and scale a component when hovered, but it displaces the surrounding components in doing so.
See screenshot:
Here's the sx I assigned to an MUI Box and Card.
const ctCardHoveredSx = {
maxWidth: 300,
'& .ct-card-toggle': {
display: 'none'
},
'&:hover .ct-card-toggle': {
display: 'flex'
},
'& .ct-card': {
transition: 'transform 0.15s ease-in-out',
boxShadow: 'none'
},
'&:hover .ct-card': {
transform: 'scale3d(1.25, 1.25, 1)',
boxShadow: '5',
zIndex: 2
}
};
Tech Stack:
NextJS
MUI
React
I think you need to use overflow hidden in the parent div and it will not displace the thing and hover will just get scale inside the same div.
Please let me know if you find any issues.
I want to apply such a Typewriting effect, I am still struggling with styled components.
I know that I need to define two animations, one for typing to animate the characters and second to blink to animate the caret.
Then I apply the :after pseudo-element inline to add the caret to the container element. With Javascript I can set the text for the inner element and set the --characters variable containing the character count. This variable is used to animate the text.
Wite-space: nowrap and overflow: hidden are needed to make content invisible as necessary.
But its not working in my App. I declared all styles and apply them inline.
App.tsx
import React from 'react';
import { Box } from '#mui/material';
const styles = {
typewriterEffect: {
display: "flex",
justifyContent: "center",
fontFamily: "monospace",
},
"typewriter-effect > text": {
maxWidth: 0,
animation: "typing 3s steps(var(--characters)) infinite",
whiteSpace: "nowrap",
overflow: "hidden",
},
"typewriter-effect:after": {
content: " |",
animation: "blink 1s infinite",
animationTimingFunction: "step-end",
},
"#keyframes typing": {
"75%",
"100%": {
maxWidth: "calc(var(--characters) * 1ch)",
},
},
"#keyframes blink": {
"0%",
"75%",
"100%": {
opacity: 1,
},
"25%": {
opacity: 0,
}
}
};
function Typewriter() {
const typeWriter: HTMLElement | null = document.getElementById('typewriter-text');
const text = 'Lorem ipsum dolor sit amet.';
typeWriter.innerHTML = text;
typeWriter.style.setProperty('--characters', text.length);
return (
<Box style={styles.typewriterEffect}>
<Box class="text" id="typewriter-text"></Box>
</Box>
);
}
export {Typewriter};
Forked into your codesandbox to recreate your issue.
You could have used styled-components i.e
import { styled } from "#mui/material/styles";
given from MUI to create styles same as Codepen Example.
Below is my solution -
https://codesandbox.io/s/automatic-typewriter-effect-stackoverflow-y546o7?file=/src/Typewriter.tsx
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'm developing with react and MaterialUI on the front end and I have a bunch of customized inputs. Everything is working pretty well except for this one. No matter what combination of selectors I use I can't seem to point to the right one to change this black color.
Also, it'd be nice to have a clear way to identify just by looking at the element selector, to drill down into the right component. Is there anyway to do this (teach a man to fish kind of thing).Here is the image of the element when I inspect it and the color I'm trying to get at.
here is the style object:
toggleToUse = {
switchBase: {},
thumb: {
color: colorUsedByInputs,
opacity: 0.6,
marginLeft: '10.2px'
},
track: {
background: 'grey',
opacity: '1 !important',
borderRadius: 20,
position: 'relative',
'&:before, &:after': {
display: 'inline-block',
position: 'absolute',
top: '50%',
width: '50%',
transform: 'translateY(-50%)',
color: '#fff',
textAlign: 'center'
}
},
checked: {
'&$switchBase': {
color: '#185a9d',
transform: 'translateX(32px)',
'&:hover': {
backgroundColor: 'rgba(24,90,257,0.08)'
}
},
'& $thumb': {
backgroundColor: '#fff'
},
'& + $track': {
background: 'linear-gradient(to right, rgba(43, 56, 97, 0.7), #2b3861)',
'&:before': {
opacity: 1
},
'&:after': {
opacity: 0
}
}
}
};
Here is the image of the element when I inspect it and the color I'm trying to get at.
<Switch classes={{ track: classes.track }} />
track: {
'.Mui-disabled + &&': {
backgroundColor: 'hotpink',
},
},
This will work for a default MUI Switch. If needed, you can increase the specificity by adding additional & to the selector. If all fails, please provide a codesandbox and precisely state what color you want in which scenario.
I have a fairly complex application with multiple drawers. I'm having an issue with the right side drawer animations. The drawers themselves animate fine, but the parent divs do not. I tried applying the same animation for the drawer to the parent div and this did not solve my problem. I've replicated the issue in CodeSandbox. See below.
Example
Our specific use case is fairly complicated, but I think we've managed to find a fix. Essentially, we had to apply a transition to the <main> element and set its margin based on the state of the right toolbar. See below.
main: {
position: 'relative',
flex: 1,
height: '100%',
overflow: 'hidden',
transition: theme.transitions.create('margin', {
easing: theme.transitions.easing.easeOut,
duration: theme.transitions.duration.enteringScreen,
}),
marginRight: -500,
},
mainRightOpen: {
transition: theme.transitions.create('margin', {
easing: theme.transitions.easing.easeOut,
duration: theme.transitions.duration.enteringScreen,
}),
marginRight: 0,
}
and implemented like so...
<main
className={`${classes.main}
${this.props.rightToolBarOpen ? classes.mainRightOpen : null}
`}
ref={(mainContent) => { this.mainContent = mainContent; }}
>
Also, if you don't want the fixed margin value, you may consider to use percentage for the margin control, for instance:
// define the drawerWidth
const drawerWidth = 33.33333;
// put margin value as a string format like below:
content: {
flexGrow: 1,
padding: theme.spacing(6),
transition: theme.transitions.create('margin', {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.leavingScreen,
}),
marginRight: `${-drawerWidth}%`,
},
contentShift: {
transition: theme.transitions.create('margin', {
easing: theme.transitions.easing.easeOut,
duration: theme.transitions.duration.enteringScreen,
}),
marginRight: 0,
},
Above solution works form me (Material-UI version I am using: v4.12.1)