Streaming live at 10am (PST)

How to make a page morph effect (example below)

I am trying to create the morph effect like in this portfolio page here, where the “morph” is changing size, colour, and space on the page depending on the scroll. Would anyone have some advice/tips/resources on how I can do this?

Hey @alcaveens,

This site is using javascript to manipulate an svg. It looks like they wrote this js specifically for this site, but this type of functionality isn’t too complex. If you do some searching you can probably find a resource that has all the necessary pieces to bring it to your site. Codepen is good for that, heres the beginning of something similar using only CSS animations, no javascript: https://codepen.io/pgalor/details/xyPGvJ

You could also use a lottie animation if you’re familiar with after effects. But you wouldn’t be able to achieve exactly the same effect.