Border scroll animation

[Olav]

Hello everyone,

 

I stumbled on the following animation on the Van Moof website which I'd like to recreate;

https://imgur.com/xSnhLYr

 

Is this possible using GSAP, and are there any codepen examples doing something similar?

Anything helps!

 

 

I appreciate your reading, hope you can help me out with an answer.

[alig01]

Hello Olav,

yes, such effects can be easily achieved with gsap.

I did a quick search for a codepen and found a similar example and adapt it slightly.

Heres the 

See the Pen ZEoVxQG by alig01 (@alig01) on CodePen

 

When I work with clip-paths, I mostly use this page, maybe it is helpful for you too.

[akapowl]

 

Great suggestion @alig01 👍- and welcome to the forum!

 

In case you don't want to use clip-paths, here is another way you could achieve something like that without the use of clip-paths, @Olav.

 

This is scaling the container of the image down in size, while at the same time counter-scaling the image up in size via a scrubbing ScrollTrigger, making use of the ExpoScaleEase from the EasePack.

 

See the Pen jOxXzYE by akapowl (@akapowl) on CodePen

 

[Olav]

Hi! Sorry for my late reply but you guys had the perfect answers for me. Thanks a lot!