Jump to content
GreenSock

Eddy1015

Fix logo on top

Recommended Posts

Hi there. 

I'm new to Greensock and struggle at my first animation.

 

What I'm trying to do:

  1. shrink the logo,
  2. change the background of the header to transparent (got a background video)
  3. move the logo in the header up
  4. fix the logo to the top

Any suggestions? ūüôā

Thanks in advance,

Eddy

See the Pen zYqpKYw by eddy1015 (@eddy1015) on CodePen

Link to comment
Share on other sites

Hi eddy,

welcome to the forums.

i understand   you correctly you want to shrink and translate the logo and then pin it whilst the background is made transparent.

What is currently happening is the logo is getting shrunk then pinned before it scrolls off the screen (without any translate tween).

 

I see that  you have defined a big logo in the css and decided to shrink it. 
I would be inclined to Invert this and define a small logo in the css and use from() tweens to shrink and translate it in place instead of a to() together with a pin for the logo defined in the scrolltrigger.

 

Link to comment
Share on other sites

 

Hey @Eddy1015, welcome to the forum.

 

You'll notice, that your header-background ( that has a position of fixed set to it ) will move up on scrolling after the pinning is finished - that exact thing would happen to your logo if you only just set its position to fixed (plus you'd have to put more styling on it to keep it's position to where you wanted).

 

 

I think this is, because both those elements are within the header, which is being pinned, and on pin, the header's position is set to fixed by GSAP. On release the position fixed will be removed, thus everything in that container will move with it when you scroll ( I hope I am right on this @GreenSock @ZachSaucier).

 

 

Unless you really need to keep this specific markup, you could take your logo out of your header and put it in a container of it's own that is set to position: fixed. This way, there would be no need to toggle classes or care about the styling in more detail.

 

 

I initially posted this pen, picking up your way of the initial large logo being scaled down and translated up in .to()-tweens.

 

See the Pen 85118b99220a085b0e8ceae8e63b1b86 by akapowl (@akapowl) on CodePen

 

 

 

But just as @Richard1604 already hinted to, I think, since for the rest of the page, you want it to stay at the top (like maybe in a navbar) you might want to think of that being its 'original' state and do your animation with from() or fromTo() tweens. A possible setup could look like this

 

.logo-container {
  position: fixed;
  top: 0;
  left:0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
}

#logo {
  position: absolute;
  height: 15vh;  
  left: calc(50% - 15vh/2);
  top: 0;
  pointer-events: auto !important;
}

 

with your timeline like so

 

tl
  .addLabel("start")
  .fromTo("#logo", { scale: 5 }, { scale: 1 } )
  .addLabel("shrink")
  .to(".header-background", { backgroundColor: "transparent" })
  .addLabel("show-bg-video")
  .fromTo("#logo", { y: () => { return (window.innerHeight/2 - window.innerHeight*0.15/2) } }, { y: 0 } )
  .addLabel("fix-logo")
;

 

 

See the Pen 43b0e81639e4ea7d3fb0d0c8af3e8caa by akapowl (@akapowl) on CodePen

 

 

At this point, I feel, like I am overcomplicating things, though, because I also had to add 'invalidateOnRefresh: true' to your ScrollTrigger and use function-based values for the tweens, since they are dependend on the height of the window and everything would be off after resizing if I didn't.

 

Hope this doesn't confuse more, than it clears things up.

 

Cheers,

Paul

  • Like 3
  • Thanks 1
Link to comment
Share on other sites

Hi @akapowl and @Richard1604,

 

Thanks for your hints and great explanations. This is quite exactly what I was trying to do.

 

3 hours ago, akapowl said:

Hope this doesn't confuse more, than it clears things up.

Is it possible to remove the background color of  .header-backgroundwhile moving the logo to the top without creating a second timeline?

 

Cheers,

Eddy

 

 

Link to comment
Share on other sites

Yes, if you checkout the timeline() docs The third parameter is time and you can set it in A very Flexible way.

there is an article in the learning Centre with lots of information and examples.

  • Like 2
Link to comment
Share on other sites

 

@Eddy1015

 

Yes, it is possible. 

Durations in timelines on scrolltriggers with scrub applied, work a bit different from normal timelines, though.

 

Check this section

 

How does duration work with scrub: true?

If you have a ScrollTrigger scrub: true and that ScrollTrigger has a timeline or tween animation associated with it, the durations of tweens within that animation serve as proportions for the total amount of distance that the tween will play. The proportion of how much distance it’s animated between is in regards to the total duration of the animation.

 

in the docs for more information:

https://greensock.com/docs/v3/Plugins/ScrollTrigger

 

 

 

Now if you imagine the whole timeline duration as 1.0 for example, before, each of your tweens would have had a relative duration of 0.333...

 

To achieve the new timing, you could for example set up your timeline like this

 

 

tl
  .addLabel("start")

  .fromTo("#logo", { scale: 5 }, { duration: 0.5, scale: 1 }, 0.0 )

  .addLabel("logoShrunkDown")

  .to(".header-background", { duration: 0.5, backgroundColor: "transparent" }, 0.5 )
  .fromTo("#logo", { y: () => { return (window.innerHeight/2 - window.innerHeight*0.15/2) } }, { duration: 0.5, y: 0 }, 0.5 )

  .addLabel("logoFixedAndVideoVisible")
;

 

 

Since you want two of those three tweens to happen at the same time, you would have to 'split' the timeline into two halves only, instead of the three thirds, that you had before.

 

Here each tween having a duration of 0.5 - and the second and third tween both starting at the same time, halfway into the timeline. 

 

But the halves don't have to be of the same duration - the scaling-down part could also have a duration of 0.1 and the other two tweens a duration of 0.9, both starting at 0.1 - depending on how long you want each part of the timeline to be in relation to the total duration.

 

 

See the Pen 1b827430a589afbb2d64c75ff8c4df8d by akapowl (@akapowl) on CodePen

 

  • Like 2
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.
√ó