Change SVG logo color on scroll

[roogud]

Hey there,

 

I'm fairly new to GreenSock. 

So I've been working on some SVG animation. I have my logo animate on hover just like I want. Now, I want to have it change color on scroll, so when there's a white background, I want the logo to stay black, and when it's on a black background, I want the logo to be white.

 

Can I achieve this with GSAP?

 

Best, Roo

See the Pen bxwwwd by roogud (@roogud) on CodePen

[benoit]

hello,

try this

See the Pen yxapBO by benoitwimart (@benoitwimart) on CodePen

 

[roogud]

Ah nice! Thanks for that!

I found this tutorial: https://eduardoboucas.com/blog/2017/09/25/svg-clip-path-logo-colour.html

where you kinda scroll the alternate logo over, kinda like a mask. Is that possible with GSAP?

And could that be applied to text as well? 

 

I also noticed that you're doing this based on Y-value in scroll. I'm wondering if I can somehow detect what the current background is and that way change the color of the logo.

[PointC]

Sounds similar to what I did in this demo:

 

See the Pen pydXLG by PointC (@PointC) on CodePen

 

You should be able to set up some triggers to animate the mask or change the color of the logo path(s) fill. The mask or clip-path route will probably be a bit better because during scrolling the logo could be straddling two sections of background colors and the mask could compensate for that.

 

Happy tweening.

 

[mikel]

Hi @roogud,

If the logo moves, it's easier.
Here is my logo:

 

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

 

Happy tweening ...

Mikel

 

 

[roogud]

Ah yea looks pretty much what I am trying to accomplish @PointC ! 

 

So, if I'm understanding this correctly, I need two versions of the logo: one black, and one white?

And then what I am essentially animation is the clip-path? (need to read about how that works :))

 

What I don't get (quite yet) is how do I trigger the clip-path animation based on the background? And would this technique also work for just regular text?

[PointC]

Yep - you'll need two versions of the logo and mask out one at a time depending on your background color.

 

I'm not sure how you'd trigger it based on the color of the background. (unless a background color change is part of the animation?) I was thinking about triggers using the y offset of various sections. Give them classes of .blackLogo and .whiteLogo for example. You'd then trigger the mask animation based on those sections page position. You could calculate it yourself or use a 3rd party plugin like ScrollMagic. You could also use the newer Intersection Observer. 

 

You can clip and mask regular DOM text too. I'm not the right person to ask about it though. The few times I've tried it I get frustrated with cross browser support and end up going back to a SVG mask or clip-path. 

 

Hopefully that helps. Happy tweening.

 

[mikel]

Hi @roogud,

 

In itself, the execution of eighthday  is a cool solution.
Can also be implemented with a timeline.
If there was not the problem 'quite jittery in Safari'.

 

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

 

But to explain the reasons for safari problem or to present a solution is something for the experts.

 

Kind regards

Mikel

 

 

[roogud]

Thanks for this @mikel. This was pretty much exactly what I was looking for.

 

Yea, but looks like it's going to be jittery no matter what. So maybe I'll just change the color on scroll like you did in the previous post.

[mikel]

 

Hi @roogud,

 

Let us not give up.

Some research:  how-to-force-safari-to-repaint-position fixed-elements-on-scroll

And another article that is a bit too complex for me though:  maximum benefit from your animation code

 

I have integrated the recommendation of corysimmons in the pen

 

.foo
  position: fixed
  &.active
    animation: repaint 1ms

@keyframes repaint
  from
    width: 99.999%
  to
    width: 100%

In my opinion it scrolls now a bit better in the safari (jungle).

 

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

 

Happy fixing ...

Mikel

[abmex]

Thanks for that. That's what I was looking for as well. However there are also text elements (the menu) in the header that need to change color as well. Can anybody offer advice?

[Cassie]

Heya Abmex!

I threw together this little demo to show SVG clipping on DOM elements.

The main thing to note here is that in order to scale SVG clip paths for use in CSS, all the coordinates need to be in the 0-1 range, so the  '0 0 1 1' viewbox coordinates are super important here!

Hope it helps!

See the Pen 52ed663a18a7a31b59b03743fa867939 by cassie-codes (@cassie-codes) on CodePen

[abmex]

Wow, thank you so much.
But how do you do that depending on a scrolling position?
The real live  example is a sticky overlay header with transparent background, consisting of a logo and some menu elements in a 100vh hero section with a dark background image. The initial color of all header elements is white.
When the user scrolls down, and the header leaves the hero section, the color of the header elements should change to a different color.

[Cassie]

Take a look at the scrollTrigger docs https://greensock.com/docs/v3/Plugins/ScrollTrigger

There are some great examples in there.
If all you need is to change the color itself and you don't need the masking swipe it would be a simple case of changing the color of the text at a certain scroll point.
 

e.g.
 

gsap.to(".navitem", {
  scrollTrigger: {
      trigger: ".trigger-section",
      start: "top top", // when the top of the trigger hits the top of the viewport
      end: "+=500", // end after scrolling 500px beyond the start
    }
  color: '#fff'
});

If you get stuck, we're happy to look at a codepen demo!