Reply To: High Level Guidance on transitions and transforms

[uxfed]

That’s a really good start!

What I’d suggest is breaking this up a bit. So starting with the image-container content, it looks like in the dribble they have two blocks of content inside image-container, and as the image-container is transitioning across the page the content inside it is also transitioning in the other direction. So you won’t actually be “changing” the content inside image-container, instead you’ll be moving one block of content out, and another block of content in.

For the width of the image-container iself, I’d use a CSS animation. It looks like you started doing this because you have “animation-name: moveAndScale;” in there. It’d be something like:

@keyframes moveAndScale {

0% {
transform: scaleX(1);
}

50% {
transform: scaleX(1.5);
}

100% {
transform: scaleX(1);
}
}

You’ll need to apply that animation directly to a separate element which contains the background though, because you don’t want to transform the text inside the block, only the background.