Jump to content
Search Community

Shrink logo on scroll and keep it fixed

archimedo test
Moderator Tag

Go to solution Solved by Carl,

Recommended Posts

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

Link to comment
Share on other sites

  • Solution

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

  • Like 6
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

 

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

 

 

 

  • Like 4
Link to comment
Share on other sites

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. 

  • Like 4
Link to comment
Share on other sites

  • 2 years later...

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;)

 

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...