Shrink logo on scroll and keep it fixed

[archimedo]

Hello everyone,

I was trying to achieve an effect with Scroll trigger. Basically when I start scrolling I would like to logo to start shrinking until it fixes on top center of the screen with a width of 200px, like these screens: screen 1 screen 2

I've tried doing that with scroll trigger setting various start/ending trigger point but I'm not sure how to transform the logo while doing the scroll.

Can you help me understand what I'm doing wrong?

Thanks!

See the Pen popjWvM by archemede (@archemede) on CodePen.

[Carl]

Hi and thanks for providing the demo!

 

There's probably a few ways to achieve this but what I did:

• modified the logo css to reflect where I want the animation to end: small, centered, with position fixed
• added an animation to the ScrollTrigger that animates from the big and centered values
• set the scrub value to true and removed the toggleActions.

See the Pen gOoaoYL by snorkltv (@snorkltv) on CodePen.

 

 

Hopefully this gets you in the right direction!

 

If you want loads of ScrollTrigger tips and tricks, here's a shameless plug for my course ScrollTrigger Express

[mikel]

Hey CARL,

 

I can't find WORDS.

 

See the Pen yLpYvQJ??editors=1010 by mikeK (@mikeK) on CodePen.

 

Happy shrinking ...

Mikel

 

 

[Carl]

Hey @mikel

Great animation! Love the schnoz droop.

You do an AMAZING job helping tons of folks around here!

[mikel]

 

Hey CARL,

 

And you can be really proud of your long green socks history.
And of course on your hyper express for young GreenSocks fans.

 

Pick up the schnoz!

Mikel

 

 

[archimedo]

15 hours ago, Carl said:

Hi and thanks for providing the demo!

 

There's probably a few ways to achieve this but what I did:

• modified the logo css to reflect where I want the animation to end: small, centered, with position fixed
• added an animation to the ScrollTrigger that animates from the big and centered values
• set the scrub value to true and removed the toggleActions.

 

 

 

 

Hopefully this gets you in the right direction!

 

If you want loads of ScrollTrigger tips and tricks, here's a shameless plug for my course ScrollTrigger Express

Thank you so much that's exactly was I was looking for. I just tweaked a few things but this is the effect I had in mind

[archimedo]

16 hours ago, Carl said:

Hi and thanks for providing the demo!

 

There's probably a few ways to achieve this but what I did:

• modified the logo css to reflect where I want the animation to end: small, centered, with position fixed
• added an animation to the ScrollTrigger that animates from the big and centered values
• set the scrub value to true and removed the toggleActions.

 

 

 

 

Hopefully this gets you in the right direction!

 

If you want loads of ScrollTrigger tips and tricks, here's a shameless plug for my course ScrollTrigger Express

I'd like to ask you just one more question: is it possible to add an ease to scrollTrigger animation?

[mikel]

 

Hey @archimedo,

 

Do you mean this effect?

 

Scrub links the progress of the animation directly to the scrollbar so it acts like a scrubber. You can apply smoothing so that it takes a little time for the playhead to catch up with the scrollbar's position! It can be any of the following

• Boolean - scrub: true links the animation's progress directly to the ScrollTrigger's progress.
• Number - The amount of time (in seconds) that the playhead should take to "catch up", so scrub: 0.5 would cause the animation's playhead to take 0.5 seconds to catch up with the scrollbar's position. It's great for smoothing things out.

 

Here the setup changed a bit. Test different scrub values...

 

See the Pen oNpbgwX?editors=0010 by mikeK (@mikeK) on CodePen.

 

Happy scrubbing ...

Mikel

 

 

 

[Carl]

Sure, you could put an ease on any animation. However, when you have scrub:true you are basically giving the user the control over the rate of change because they can scroll as fast or slow as they want. Try putting a "bounce" or a "power4" ease on your animation as a quick test.

 

I'm guessing the solution @mikel provided is what you were trying to achieve. 

[lagalga]

Hi! one more twist... is it possible to have an initial logo size relative to the width calculated with css variables* and after the animation the size is fixed in pixels?
I mean:
From-> width: calc(100vw - var(--borde));
To-> width:250px;

 

Thanks

 

[Rodrigo]

Hi @lagalga,

 

You could actually set the initial size with that calc using CSS and then just use a regular to() instance to create the animation:

.my-element {
  width: calc(100vw - var(--border));
}

Then in your JS:

gsap.to(".my-element", {
  width: 250,
});

That would be the approach I'd take.

 

If you keep having issues, please create a minimal demo from this codepen starter:

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen.

 

Happy Tweening!

[lagalga]

Thanks
I was stuck on doing it with gsap.from and this is simpler ?

Sometimes you are so deep into something and you don't see that the solution is simpler