Scroll - content stretch animation

Question

I want to animate content blocks (while scrolling) exactly like here:

example 1
example 2

with this kind of "stretch" effect.

How can I implement this?

Answer 1

You could look into doing transform: scaleY(2) for example on the images to get the stretching effect though you'd have to experiment to get the exact look you want which may depend on the aspect ratios of whatever images you want to use.

For moving the image and its associated text up into the viewport you may be best off combining everything (the img stretching and the movement) into CSS animations as those will give you control of exact timing.

It looks from the example as though you'd want one set of keyframes which define this movement and the animations for coming in and another set for when they move out upwards.

And you will want to use the CSS animation-fill-mode: forwards to ensure that after an animation set the elements stay in place.

If you could include some minimal example of your layout with an image and text that would help create a snippet to show these transforms in action.