Animation component is full width?

[Bosskee]

Hello!

I'm using AnimateKeyframes to move an arrow left to right. The arrow is placed in a narrow space, which is why it's vital that it doesn't move outside it's designated space. The problem is that the Arrow's parent, which is the AnimateKeyframes component, seems to be full width by default.

See this gif: https://i.imgur.com/34uZSbG.gif The blue area is the AnimateKeyframes component. As you see in the bottom, it creates a horizontal scrollbar due to the component going too far right. The SVG itself is not full width.

This is my component:

      <Box sx={{ margin: 2, marginTop: 6, textAlign: "center" }}>
        <AnimateKeyframes
        play
        duration={2.5}
        keyframes={[
            { 0: 'transform: translateX(0px)' }, // 0%
            { 50: 'transform: translateX(20px)' }, // 50%
            { 100: 'transform: translateX(0px)' } // 100%
          ]}
        iterationCount="infinite"
        easeType="ease"
        >
            <ArrowForwardIcon />
        </AnimateKeyframes>
        <Typography variant="h5">Click on the map to place zones</Typography>
      </Box>

Any ideas on this issue? Is the Animation component intentionally fullwidth? Many thanks, and great library :)

[bluebill1049]

you may have to apply individual style (width) for the keyFrames.

[Bosskee]

@bluebill1049 Applying individual style to the <AnimateKeyframes> don't always seem to work. Any ideas? For example if I add backgroundColor: "red"to it nothing changes.

[Bosskee]

Doing it like this:

<AnimateKeyframes
            style={{ backgroundColor: "red" }}
            play
            duration={1}
            keyframes={[
                { 0: 'opacity: 0.3' }, // 0%
                { 50: 'opacity: 1' }, // 50%
                { 100: 'opacity: 0.3' } // 100%
            ]}
            iterationCount="infinite"
            easeType="linear"
        >
            <Chip sx={{ marginLeft: 2 }} label="Updating map" color="secondary" />
        </AnimateKeyframes>

This doesn't change the color of the div.

[Bosskee]

Also, are we able to animate display? For example:

                { 0: 'display: block' }, // 0%
                { 50: 'display: initial' }, // 50%
                { 100: 'display: block'} // 100%

Doesn't seem to work for me.