I am working on adding transition animation that is based on the following example: https://1y3yyqpq7q.codesandbox.io/
In my code base when I press the skip button then a transition will occur, and a “new” paper component will show.
The problem is that during transition the X scrollbar is activated, and it doesn’t look good. You can see the same behavior in the example (URL). I tried to use overflowX: "hidden" but it’s not working.
Any suggestion how can I remove the overflow-X during transition ?
Thank you
const useStyles = makeStyles(theme => ({
paper: {
borderRadius: '12px',
border: '1.5px solid',
borderColor: '#7F00FF',
marginBottom: '15px',
position: 'absolute',
width: '100%'
},
img: {
height: 255,
maxWidth: 400,
overflow: 'hidden',
display: 'block',
width: '100%',
},
}));
const [activeChapter, setActiveChapter] = useState(0);
const onClick = useCallback(() => setActiveChapter(activeChapter => (activeChapter + 1) % 4), [])
const transitions = useTransition(activeChapter, p => p, {
from: { opacity: 0, transform: 'translate3d(100%,0,0)' },
enter: { opacity: 1, transform: 'translate3d(0%,0,0)'},
leave: { opacity: 1, transform: 'translate3d(-105%,0,0)', overflowX: "hidden"},
})
<div>
{transitions.map(({ item, props, key }) => {
const chapter = data[item]
if (chapter) {
return (
<animated.div style={props} key={key}>
<Paper className={classes.paper} >
<Typography variant="h5">
{chapter.title}
</Typography>
<Grid container>
<Grid item xs>
<img
className={classes.img}
src={classes.img[0]}
/>
</Grid>
</Grid>
<Grid container direction="row" justify="flex-end" >
<Grid item >
<IconButton onClick={onClick}>
<SkipNextIcon />
</IconButton>
</Grid>
</Grid>
</Paper>
</animated.div>)
}
})}
<Box component="span" m={1} />
</div>
You can try to add overflow: hidden; to the body.
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}