Svg animation

[Fay Kay]

Hello everyone, 

i'm trying to achieve a similar effect as you can see in this site (https://menudurable.ca/en/) as you scroll a red rectangle is appearing with an elastic effect.

I've made a codepen with what i have so far (not quite there yet).

If someone could point me to the right direction i would appreciated.

Thank you!

 

 

 

See the Pen YzVVwmR by Faykay (@Faykay) on CodePen

[mikel]

Hey @Fay Kay,

 

Let GSAP do the job: rotation and shape.
Is that what you expect?

 

See the Pen dyWRooK?editors=1100 by mikeK (@mikeK) on CodePen

 

Happy scrolling ...

Mikel

 

[Fay Kay]

Hey @Mikel, 

you truly are a Superhero!

This is even smoother from what i was expecting.

Thank you so much!

Fay

 

[Fay Kay]

Hey Mikel, 

do you know how can i remove the white space that is been added on top and bottom of the animation? 

I've tried pinSpacing:false,

but with no luck, i wrapped the animation in a div and pinned it but nothing is changing.

What am i missing?

 

Thank you!

[mikel]

Hey @Fay Kay,

 

You need a shape (SVG) adapted to your needs (?).

 

See the Pen RwVgBEG by mikeK (@mikeK) on CodePen

 

Happy scrolling ...

Mikel

 

[Fay Kay]

Hey @mikel,

i can't thank you enough once again!!