How can I animate a hidden card to appear

How can I animate a hidden card to appear - javascript

I have a set of MUI cards. One of these cards is hidden until the other cards are expanded. When the cards expand, the hidden card then appears. I want to animate the hidden card so that it does not suddenly pop in.
** Styling **
const useStyles = makeStyles((theme) => ({
summaryBox: {
display: "flex",
},
qCard: {
backgroundColor: "#D9F5FD",
border: "1px solid #E1E1E1",
width: "5vw",
height: "auto",
marginRight: "1vw",
animation: "pop 500ms ease-in-out forwards",
},
expand: {
transform: "rotate(0deg)",
marginLeft: "auto",
transition: theme.transitions.create("transform", {
duration: theme.transitions.duration.shortest,
}),
},
expandOpen: {
transform: "rotate(180deg)",
},
}));
...
const [expanded, setExpanded] = useState(false);
const [hidden, setHidden] = useState(true);
const handleExpandClick = () => {
setExpanded(!expanded);
setHidden(!hidden);
};
...
<Box className={classes.summaryBox} onClick={handleExpandClick} aria-expanded={expanded}>
<Card className={classes.qCard} hidden={hidden}>
<Collapse in={expanded} timeout="auto" unmountOnExit>
</Collapse>
</Card>
</Box>

I can suggest of use the easing prop on the collapse component.
https://mui.com/material-ui/api/collapse/

Try adding this css,
qCard: {
backgroundColor: "#D9F5FD",
border: "1px solid #E1E1E1",
width: 0,
height: 0,
marginRight: "1vw"
},
animate: {
animation: "$myEffect 500ms ease-in-out forwards"
},
"#keyframes myEffect": {
"0%": {
width: 0,
height: 0,
},
"100%": {
width: "5vw",
height: "auto"
}
}
Dynamically add the animate style based on hidden value.

Related

Overlapping images animation effect while scrolling

I got inspired to create this animation effect. What I want to achieve is that the overlapped images get a little bigger when scrolling down and then again smaller when I scroll back.
For the scrolling part I know I need to use Intersection Observer API. I think I managed it to do right but I cant get it to work. I use React Typescript with inline styling.
The original animation - Three overlaping images - getting bigger on scroll down:
Codepen
My React Code - OverlappingImages.tsx :
import React from 'react';
const styles = {
container: {
position: 'relative',
height: '400px',
margin: '0 50px',
div: {
width: '380px',
border: '1px solid #000',
overflow: 'hidden',
lineHeight: 0,
transition: 'transform .4s ease-in-out',
img: {
width: '100%',
fontSize: 0,
},
},
img1: {
left: '5%',
top: 0,
position: 'absolute',
transform: 'rotate(-4deg) translateY(20%)',
transitionDelay: '0s',
},
img2: {
left: '50%',
top: 0,
position: 'absolute',
transform: 'translate(-50%, 0)',
transitionDelay: '.1s',
zIndex: 1,
},
img3: {
right: '5%',
top: 0,
position: 'absolute',
transform: 'rotate(4deg) translateY(20%)',
transitionDelay: '.2s',
},
' &.active': {
img1: {
transform: 'rotate(-6deg) translateY(50%) scale(1.9)',
},
img2: {
transform: 'translate(-50%, -2%) scale(1.2)',
},
img3: {
transform: 'rotate(6deg) translateY(24%) scale(1.2)',
},
},
},
body: {
fontFamily: 'sans-serif',
fontSize: '48px',
fontWeight: 'bold',
letterSpacing: '1px',
margin: 0,
},
section: {
textAlign: 'center',
padding: '500px 0',
'&:nth-child(odd)': {
background: '#eee',
},
},
};
function OverlappingImages() {
const wrapper = document.querySelector('.container');
const className = 'active';
const observer = new IntersectionObserver(
(entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
wrapper.classList.add(className);
return;
}
wrapper.classList.remove(className);
});
},
{
threshold: 1,
}
);
observer.observe(wrapper);
return (
<>
<section>
<p>(scroll down!)</p>
</section>
<section>
<div style={styles.container}>
<div style={styles.container.img1}>
<img src="https://via.placeholder.com/350x250" alt="img1" />
</div>
<div style={styles.container.img2}>
<img src="https://via.placeholder.com/350x250" alt="img2" />
</div>
<div style={styles.container.img3}>
<img src="https://via.placeholder.com/350x250" alt="img3" />
</div>
</div>
</section>
<section>
<p>(scroll up!)</p>
</section>
</>
);
}
export { OverlappingImages };

Here's the result:
You need to wrap your code above reutrn(), into the window.onload because if you run it in the way your currently doing it, document.querySelector('.container') is going to return nothing but null or undefined
Your container has no class or id and your trying to access it with document.querySelector('.container') again you'll get null
Make sure you assign an id or a class to it
Style.css
#container * {
transition: all .5s ease;
}
.active div:nth-child(1) {
transform: rotate(-4deg) translateY(20%) scale(1.1) !important;
}
.active div:nth-child(2) {
transform: translate(-50%, 0%) scale(1.1) !important;
}
.active div:nth-child(3) {
transform: rotate(4deg) translateY(20%) scale(1.1) !important;
}
OverlappingImages.tsx
const styles = {
container: {
position: "relative",
height: "400px",
margin: "0 50px",
padding: "30px",
transition: "all .5s ease",
img1: {
left: "5%",
top: 0,
position: "absolute",
transform: "rotate(-4deg) translateY(20%)",
transitionDelay: "0s",
},
img2: {
left: "50%",
top: 0,
position: "absolute",
transform: "translate(-50%, 0)",
transitionDelay: ".1s",
zIndex: 1,
},
img3: {
right: "5%",
top: 0,
position: "absolute",
transform: "rotate(4deg) translateY(20%)",
transitionDelay: ".2s",
},
},
whiteSpace: {
display: "flex",
alignItems: "center",
justifyContent: "center",
height: "100vh",
},
};
function OverlappingImages() {
window.onload = function () {
const wrapper = document.querySelector("#container");
const className = "active";
let preY = 0, preR = 0;
const observer = new IntersectionObserver(
entries => {
entries.forEach(e => {
const currentY = e.boundingClientRect.y;
const currentR = e.intersectionRatio;
if (currentY < preY || e.isIntersecting) {
wrapper?.classList.add(className);
} else if (currentY > preY && currentR < preR) {
wrapper?.classList.remove(className);
}
preY = currentY;
preR = currentR;
});
},
{ threshold: 0.8 }
);
observer.observe(wrapper);
};
return (
<>
<section>
<div style={styles.whiteSpace}>
<p>(scroll down!)</p>
</div>
</section>
<section>
<div style={styles.container} id="container">
<div style={styles.container.img1}>
<img src="https://via.placeholder.com/350x250" alt="img1" />
</div>
<div style={styles.container.img2}>
<img src="https://via.placeholder.com/350x250" alt="img2" />
</div>
<div style={styles.container.img3}>
<img src="https://via.placeholder.com/350x250" alt="img3" />
</div>
</div>
</section>
<section>
<div style={styles.whiteSpace}>
<p>(scroll up!)</p>
</div>
</section>
</>
);
}
export default OverlappingImages;
Second approach(using ref)
Style.css
.active div:nth-child(1) {
transform: rotate(-4deg) translateY(20%) scale(1.1) !important;
}
.active div:nth-child(2) {
transform: translate(-50%, 0%) scale(1.1) !important;
}
.active div:nth-child(3) {
transform: rotate(4deg) translateY(20%) scale(1.1) !important;
}
OverlappingImages.tsx
import {useRef, useEffect} from 'react';
const styles = {
container: {
position: "relative",
height: "400px",
margin: "0 50px",
padding: "30px",
img1: {
left: "5%",
top: 0,
position: "absolute",
transform: "rotate(-4deg) translateY(20%)",
transition: "all .5s ease",
},
img2: {
left: "50%",
top: 0,
position: "absolute",
transform: "translate(-50%, 0)",
transition: "all .5s ease .1s",
zIndex: 1,
},
img3: {
right: "5%",
top: 0,
position: "absolute",
transform: "rotate(4deg) translateY(20%)",
transition: "all .5s ease .2s",
},
},
whiteSpace: {
display: "flex",
alignItems: "center",
justifyContent: "center",
height: "100vh",
},
};
function OverlappingImages() {
const ref = useRef(null);
useEffect(()=>{
const wrapper = ref.current;
const className = "active";
let preY = 0, preR = 0;
const observer = new IntersectionObserver(
entries => {
entries.forEach(e => {
const currentY = e.boundingClientRect.y;
const currentR = e.intersectionRatio;
if (currentY < preY || e.isIntersecting) {
wrapper?.classList.add(className);
} else if (currentY > preY && currentR < preR) {
wrapper?.classList.remove(className);
}
preY = currentY;
preR = currentR;
});
},
{ threshold: 0.8 }
);
observer.observe(wrapper);
},[])
return (
<>
<section>
<div style={styles.whiteSpace}>
<p>(scroll down!)</p>
</div>
</section>
<section>
<div ref={ref} style={styles.container}>
<div style={styles.container.img1}>
<img src="https://via.placeholder.com/350x250" alt="img1" />
</div>
<div style={styles.container.img2}>
<img src="https://via.placeholder.com/350x250" alt="img2" />
</div>
<div style={styles.container.img3}>
<img src="https://via.placeholder.com/350x250" alt="img3" />
</div>
</div>
</section>
<section>
<div style={styles.whiteSpace}>
<p>(scroll up!)</p>
</div>
</section>
</>
);
}
export default OverlappingImages;

The styled-components approach:
I created dummy data for the loop.
Created simple components for section, figure and img. I used figure as a wrapper.
Replaced all necessary style from img to figure and changed styled logic from position: absolute to grid solution. It will allow us to keep the images in the center of the screen if screen size is large and make it flexible for the small screens.
The PictureWrapper (figure) can pass 2 props, position and state.
OverlappingImages.tsx
import { useRef, useEffect, useState, useMemo } from "react";
import styled, { css } from "styled-components";
import data from "./data";
export type TypePosition = "left" | "center" | "right";
interface IProps {
position: TypePosition;
active: boolean;
}
const Image = styled.img`
width: 100%;
height: auto;
`;
// Left image wrapper style with active, inactive state
const left = (active: boolean) => css`
${!active && css`transform: rotate(-4deg) translateX(calc(-1 * clamp(25%, 20vw, 75%)));`}
${active && css`transform: rotate(-6deg) translateX(calc(-1 * clamp(25%, 20vw, 75%))) scale(1.2);`}
transition-delay: 0s;
z-index: 1;
`;
// Center image wrapper style with active, inactive state
const center = (active: boolean) => css`
${active && css`transform: scale(1.2);`}
transition-delay: 0.1s;
z-index: 2;
`;
// Right image wrapper style with active, inactive state
const right = (active: boolean) => css`
${!active && css`transform: rotate(4deg) translateX(clamp(25%, 20vw, 75%));`}
${active && css`transform: rotate(6deg) translateX(clamp(25%, 20vw, 75%)) scale(1.2);`}
transition-delay: 0.2s;
z-index: 1;
`;
// Image wrapper component with 2 props:
// position: left | center | right
// active: true / false
const PictureWrapper = styled.figure<IProps>`
grid-column: 1;
grid-row: 1;
width: clamp(200px, 40vw, 380px);
display: flex;
border: 1px solid #000;
transition: transform 0.4s ease-in-out;
${({ position, active }) => position === "left" && left(active)}
${({ position, active }) => position === "center" && center(active)}
${({ position, active }) => position === "right" && right(active)}
`;
const Container = styled.section`
display: grid;
place-content: center;
position: relative;
margin: 0 50px;
`;
export const OverlappingImages = () => {
const [active, setActive] = useState(false);
const ref = useRef<HTMLElement>(null);
const callback = (entries: IntersectionObserverEntry[]) => {
const [entry] = entries;
if (entry.isIntersecting) {
setActive(entry.isIntersecting);
return;
}
setActive(false);
};
const options = useMemo(() => ({
root: null,
rootMargin: "0px",
threshold: 0.75
}), []);
useEffect(() => {
const container = ref.current;
// Observer with external callback function and options
const observer = new IntersectionObserver(callback, options);
if (container) observer.observe(container);
//cleanup when a component unmounted
return () => {
if (container) observer.unobserve(container);
};
}, [ref, options]);
const images = data.map((img) => {
return (
<PictureWrapper key={img.id} position={img.position} active={active}>
<Image src={img.image} />
</PictureWrapper>
);
});
return <Container ref={ref}>{images}</Container>;
};
data.ts
import { TypePosition } from "./OverlappingImages";
interface IData {
id: string;
image: string;
position: TypePosition;
}
export const data: IData[] = [
{
id: "d4a54w5s1d2sd24",
image: "https://via.placeholder.com/350x250",
position: "left"
},
{
id: "ad4e5qe4545d7ew4",
image: "https://via.placeholder.com/350x250",
position: "center"
},
{
id: "das54w5e1sa2dw5e5",
image: "https://via.placeholder.com/350x250",
position: "right"
}
];
export default data;
App.tsx
import "./styles.css";
import { OverlappingImages } from "./OverlappingImages";
export default function App() {
return (
<div className="App">
<section>
<p>(scroll down!)</p>
</section>
<OverlappingImages />
<section>
<p>(scroll up!)</p>
</section>
</div>
);
}
sections style
section {
display: grid;
place-content: center;
min-height: 100vh;
text-align: center;
}
section:nth-child(odd) {
background: #eee;
}

How can I change the color of MUI styled component?

I have a MUI styled component that renders a green circular badge.
const StyledGreenBadge = styled(Badge)(({ theme }) => ({
'& .MuiBadge-badge': {
backgroundColor: '#44b700',
color: '#44b700',
width: '15px',
height: '15px',
borderRadius: '100%',
boxShadow: `0 0 0 2px ${theme.palette.background.paper}`,
'&::after': {
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: '100%',
borderRadius: '50%',
animation: 'ripple 1.2s infinite ease-in-out',
border: '1px solid currentColor',
content: '""',
},
},
'#keyframes ripple': {
'0%': {
transform: 'scale(.8)',
opacity: 1,
},
'100%': {
transform: 'scale(2.4)',
opacity: 0,
},
},
}));
Now, I want my code to be DRY, so I want to create a StyledYellowBadge.
All I have to do is somehow just change the color property of StyledGreenBadge.
Yet, I could not figure out how for 3 hours.
I have tried something like this:
color: { desiredColor === 'yellow' ? 'yellow' : #44b700'},
where desiredColor is a second argument, after
{ theme }
How can I make achieve this?

You can add custom properties to your styled MUI component by describing the type:
const StyledGreenBadge = styled(Badge)<{ badgeColor?: string }>(
Then, you can pass described property (badgeColor in this case) to your styled Badge component:
<StyledGreenBadge badgeColor="red" badgeContent={4} color="primary">
and assign it to the property you want:
backgroundColor: props.badgeColor ?? "#44b700",
Full code:
const StyledGreenBadge = styled(Badge)<{ badgeColor: string }>(
({ theme, ...props }) => {
console.log(props);
return {
"& .MuiBadge-badge": {
backgroundColor: props.badgeColor ?? "#44b700",
color: "#44b700",
width: "15px",
height: "15px",
borderRadius: "100%",
boxShadow: `0 0 0 2px ${theme.palette.background.paper}`,
"&::after": {
position: "absolute",
top: 0,
left: 0,
width: "100%",
height: "100%",
borderRadius: "50%",
animation: "ripple 1.2s infinite ease-in-out",
border: "1px solid currentColor",
content: '""'
}
},
"#keyframes ripple": {
"0%": {
transform: "scale(.8)",
opacity: 1
},
"100%": {
transform: "scale(2.4)",
opacity: 0
}
}
};
}
);
export default function SimpleBadge() {
return (
<StyledGreenBadge badgeColor="red" badgeContent={4} color="primary">
<MailIcon color="action" />
</StyledGreenBadge>
);
}
Demo

How to overlay the expand of accordion?

I would like to overlay the expand of the accordion but I don't know whoch part should I do. in the first picture show that output I want it overlay the other textfield when clicking the dropdown icon, as for the second picture show my current output which every time I click the dropdown it does not overlay rather it adjust the textfield. any advice?
What I want:
My current output:
my code:
<Accordion expanded={isExpanded} onClick={() => setExpanded(!isExpanded)}>
<AccordionSummary
expandIcon={<Icon icon={IMAGE.DropIcon} classStyle={classes.icon} />}>
{changeType}
</AccordionSummary>
<AccordionDetails>
<Button
className={classes.button}
onClick={() => onChangeType('GOLD')}>
GOLD
</Button>
<Button
className={classes.button}
onClick={() => onChangeType('GEMS')}>
GEMS
</Button>
<Button
className={classes.button}
onClick={() => onChangeType('COINS')}>
COINS
</Button>
</AccordionDetails>
</Accordion>
my styles:
const Accordion = withStyles({
root: {
padding: 0,
marginBottom:'1rem',
borderRadius: '8px',
boxShadow: 'none',
minHeight: '2em',
width: '15vw',
fontSize: '1.5em',
fontWeight: 600,
'&:not(:last-child)': {
borderBottom: 0,
},
'&:before': {
display: 'none',
},
'&$expanded': {
minHeight: '2em',
padding: 0,
marginTop: 2,
marginBottom: 2,
},
},
expanded: {},
})(MuiAccordion);
const AccordionSummary = withStyles({
root: {
margin: 0,
padding: '0 0 0 1em',
display: 'flex',
flexDirection: 'row',
borderRadius: '8px',
border: '1px solid',
minHeight: '2em',
width: '13.7vw',
'&$expanded': {
minHeight: '2em',
},
'& .MuiAccordionSummary-expandIcon.Mui-expanded': {
transform: 'none',
},
'& .MuiAccordionSummary-expandIcon': {
transform: 'none',
transition: 'none',
},
'& .MuiIconButton-edgeEnd': {
margin: 0,
padding: 0,
},
},
content: {
margin: 0,
'&$expanded': {
margin: 0,
},
},
expanded: {},
})(MuiAccordionSummary);
const AccordionDetails = withStyles(() => ({
root: {
padding: '0',
display: 'flex',
flexDirection: 'column',
width: '100%',
},
}))(MuiAccordionDetails);

You can add overlay by adding z-index to the AccordionDetails.
<Accordion >
<AccordionSummary
expandIcon={<ExpandMoreIcon />}
aria-controls="panel1a-content"
id="panel1a-header"
>
<Typography>Accordion 1</Typography>
</AccordionSummary>
<div style={{zIndex:1 ,position:'absolute' ,width:'100%'}}>
<Card >
<AccordionDetails>
<Button>GOLD</Button>
<Button>GEMS</Button>
<Button>COINS</Button>
</AccordionDetails>
</Card>
</div>
</Accordion>
{/* Other contents of the page */}

hey I was looking to Accadian docs https://mui.com/components/accordion/
and all you need to do is just add some for AccordionDetails like background color , and to match the image some padding at the bottom, border and border radius and I tried this for demonstrate this here https://stackblitz.com/edit/react-k3tktv?file=demo.js

Components do not re-render on state change react

I'm stuck with this annoying problem, in which, I'm just trying to make a navigation bar containing a hamburger and stuff, like that, but components do not re-render or update when I click on a button which is supposed to change the state of the components, and cause the hamburger button and menu to open and vice versa.
import React, {useState} from "react";
import styles from "./Navigation.module.css";
import pin from "./pin.png";
import "./NavFunctions";
function Navigation(props) {
let [country, setCountry] = useState("UK");
let [city, setCity] = useState("London");
let [response, setResponse] = useState({});
let [MenuHamburgerToggled, setMenuHamburgerToggled] = useState(false);
const style = {
nav: {
position: "absolute",
top: "0",
left: "0",
width: "100vw",
height: "150px",
backgroundColor: "transparent"
},
nav_container: {
flexDirection: "row",
display: "flex",
alignItems: "center",
justifyContent: "space-between",
margin: "40px 100px",
color: "white",
},
cnc: {
fontFamily: '"Agency FB", serif',
fontSize: '30pt',
},
hamburgerMenuToggle: {
width: "30px",
height: "30px",
}
}
return (
<React.Fragment>
<Menu isOpen={MenuHamburgerToggled}/>
<nav style={style.nav}>
<div style={style.nav_container}>
<div style={style.cnc}>
{country}, {city} <img style={{
width: "30px", height: "30px", marginLeft: "10px"
}} src={pin} alt="pin"/>
</div>
<div style={style.hamburgerMenuToggle}>
<MenuHamburger toggled={MenuHamburgerToggled} onClick={()=> setMenuHamburgerToggled(!MenuHamburgerToggled)}
/>
</div>
</div>
</nav>
</React.Fragment>
)
}
function MenuHamburger(props) {
let [toggled, setToggled] = useState(props.toggled ? props.toggled : false);
const handleClick = () => {
setToggled(!toggled);
}
const styles = {
toggleHamburger: {
zIndex: "1001",
cursor: "pointer",
transition: "all cubic-bezier(.51,.58,.28,.98) .25s",
},
toggleHamburger__ic: {
display: "inline-block",
cursor: "pointer",
},
tg__hr: {
backgroundColor: "transparent",
border: "none",
outline: "none",
transition: "all cubic-bezier(.51,.58,.28,.98) .25s",
},
toggle_bir: {
width: "30px",
height: "3px",
borderRadius: "3px",
backgroundColor: "#efecff",
margin: "4px 0",
transform: toggled ? "rotate(-45deg) translate(-7px, 2px)" : "none",
WebkitTransform: toggled ? "rotate(-45deg) translate(-7px, 2px)" : "none",
transition: " all cubic-bezier(.51,.58,.28,.98) .25s",
},
toggle_iki: {
width: "30px",
height: "3px",
borderRadius: "3px",
backgroundColor: "#efecff",
margin: "4px 0",
opacity: toggled ? "0" : "1",
transition: " all cubic-bezier(.51,.58,.28,.98) .25s",
},
toggle_och: {
width: "30px",
height: "3px",
borderRadius: "3px",
backgroundColor: "#efecff",
margin: "4px 0",
transform: toggled ? "rotate(45deg) translate(-7px, -5px)" : "none",
WebkitTransform: toggled ? "rotate(45deg) translate(-7px, -5px)" : "none",
transition: " all cubic-bezier(.51,.58,.28,.98) .25s",
},
}
return (
<div style={styles.toggleHamburger}
>
<button style={styles.tg__hr} >
<div style={styles.toggleHamburger__ic}>
<div style={styles.toggle_bir}></div>
<div style={styles.toggle_iki}></div>
<div style={styles.toggle_och}></div>
</div>
</button>
</div>
)
}
function Menu(props) {
let [isOpen, setIsOpen] = useState(props.isOpen ? props.isOpen : false);
let styles = {
Menu_container: {
width: "100vw",
height: isOpen === true ? "100vh" : "0",
backgroundColor: "#211113",
transition: "all ease 1s"
}
}
return (
<div style={styles.Menu_container}>
</div>
)
}
export default Navigation;

Your MenuHamburger is not an html element component, so onClick won't work if you don't manually call it.
What you can do is pass the onClick into your div inside the MenuHamburger render method. This will ensure that when the user clicks the div, it will call the onClick on the <MenuHamburger onCLick={...} parent.
function MenuHamburger(props) {
...
return (
<div style={styles.toggleHamburger} onClick={props.onClick}>
...
}

Finally, I managed to fix the problem by adding useEffect like this:
function MenuHamburger(props) {
let [toggled, setToggled] = useState(props.toggled ? props.toggled : false);
const handleClick = () => {
setToggled(!toggled);
}
useEffect( () => {
setToggled(props.toggled);
}, [props.toggled]);
const styles = {
toggleHamburger: {
zIndex: "1001",
cursor: "pointer",
transition: "all cubic-bezier(.51,.58,.28,.98) .25s",
},
toggleHamburger__ic: {
display: "inline-block",
cursor: "pointer",
},
tg__hr: {
backgroundColor: "transparent",
border: "none",
outline: "none",
transition: "all cubic-bezier(.51,.58,.28,.98) .25s",
},
toggle_bir: {
width: "30px",
height: "3px",
borderRadius: "3px",
backgroundColor: "#efecff",
margin: "4px 0",
transform: toggled ? "rotate(-45deg) translate(-7px, 2px)" : "none",
WebkitTransform: toggled ? "rotate(-45deg) translate(-7px, 2px)" : "none",
transition: " all cubic-bezier(.51,.58,.28,.98) .25s",
},
toggle_iki: {
width: "30px",
height: "3px",
borderRadius: "3px",
backgroundColor: "#efecff",
margin: "4px 0",
opacity: toggled ? "0" : "1",
transition: " all cubic-bezier(.51,.58,.28,.98) .25s",
},
toggle_och: {
width: "30px",
height: "3px",
borderRadius: "3px",
backgroundColor: "#efecff",
margin: "4px 0",
transform: toggled ? "rotate(45deg) translate(-7px, -5px)" : "none",
WebkitTransform: toggled ? "rotate(45deg) translate(-7px, -5px)" : "none",
transition: " all cubic-bezier(.51,.58,.28,.98) .25s",
},
}
return (
<div style={styles.toggleHamburger}
onClick={props.onClick}
>
<button style={styles.tg__hr} >
<div style={styles.toggleHamburger__ic}>
<div style={styles.toggle_bir}></div>
<div style={styles.toggle_iki}></div>
<div style={styles.toggle_och}></div>
</div>
</button>
</div>
)
}
function Menu(props) {
let [isOpen, setIsOpen] = useState(props.isOpen ? props.isOpen : false);
useEffect( () => {
setIsOpen(props.isOpen);
}, [props.isOpen]);
let styles = {
Menu_container: {
width: "100vw",
height: isOpen === true ? "100vh" : "0",
backgroundColor: "#211113",
transition: "all ease 1s"
}
}
return (
<div style={styles.Menu_container}>
</div>
)
}
So, now components update as their state changes, and animations work fine too.
thanks for the guide.

Image Overlay using JS styling

Currently, I am trying to place an overlay on top of a background image. For some reason I just can't seem to get the background color to lay on top of the image. Any suggestions would be greatly appreciated. I am using a lot of Material UI etc, so my styling is done using JS.
import React from 'react'
import Background from '../images/background.jpg'
// MUI STUFF
import Grid from '#material-ui/core/Grid'
import Container from '#material-ui/core/Container'
import Box from '#material-ui/core/Box'
import { makeStyles } from '#material-ui/core/styles'
const useStyles = makeStyles(theme => ({
background: {
backgroundImage: `url(${Background})`,
position: 'relative',
objectFit: 'cover',
width: '100%',
height: 400,
paddingTop: 70,
margin: 0
},
card: {
width: '100%'
},
overlay: {
position: 'absolute',
objectFit: 'cover',
width: '100%',
height: 400,
margin: 0,
backgroundColor: '#5BC2E7'
}
}))
const Home = () => {
const classes = useStyles()
return (
<Box>
<div className={classes.overlay}>
<Box className={classes.background}>
<Container>
Wyncode is so great and stuff. Track your jobs and stuff here.
</Container>
</Box>
</div>
<Box>
<Container>More stuff will go here</Container>
</Box>
</Box>
)
}
export default Home

try this css:
background: {
backgroundImage: `url(${Background})`,
position: 'relative',
objectFit: 'cover',
width: '100%',
height: 400,
paddingTop: 70,
margin: 0
},
overlay: {
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: '100%',
margin: 0,
backgroundColor: '#5BC2E7'
}
With this html:
<Box>
<Box className={classes.background}>
<div className={classes.overlay}>
<Container>
Wyncode is so great and stuff. Track your jobs and stuff here.
</Container>
</div>
</Box>
<Box>
<Container>More stuff will go here</Container>
</Box>
</Box>

We Keep Coding

JavaScript is the programming language of the Web.

How can I animate a hidden card to appear - javascript

I can suggest of use the easing prop on the collapse component. https://mui.com/material-ui/api/collapse/

Related

Overlapping images animation effect while scrolling

How can I change the color of MUI styled component?

How to overlay the expand of accordion?

Components do not re-render on state change react

Image Overlay using JS styling

Categories

Resources