Blow up shape to fill screen

[Jay George P 1 Likes (Newbie)]

I'm trying to get this logo "motif" shape to fill the screen as you scroll.

I have it working but it's far from a smooth/polished experience.

 

Scroll down to activate the blow-up effect. I've added red borders just to make things clearer.

 

My question is, am I doing something wrong? And how can this be silky smooth?

At the moment it accelerates too fast and the 'easing' is not pleasing to the eye.

See the Pen NWwwLLQ by JayGeorge (@JayGeorge) on CodePen

[Shaun Gorneau 2,037 Likes (Superhero)]

Hi @Jay George P,

 

I'm wondering what you're testing on, because it's very smooth here.

[mikel 4,775 Likes (Superhero)]

Hey @Jay George P,

 

Depending on your feelings, try the values:

end:'+=2000' or more
scrub: 0.3 for example
and set the tween ease:'none'

 

Happy tweening ...

Mikel

 

 

 

[Jay George P 1 Likes (Newbie)]

Thanks for your feedback. I actually read about easing shortly after I posted this question.

 

Here is an updated and tweaked Codepen for anyone that runs into this too:

 

See the Pen RwjjmWv by JayGeorge (@JayGeorge) on CodePen