SVG logo change colour outside of sections during scroll

[furley]

Hi, I have a logo in the top left that is position fixed and outside of sections.
I want to achieve something similar to  with the idea being when the section touches the bottom the logo the mask behind will begin to display over the top then fully display when the section behind touches the top of the logo and stay like that until a section touches it again or the class animated-section is not on the slide.
For example if 20px of the section is underneath the logo then 20px height of the mask should be displayed and so on.
I did have this all working but I came back to it after working on another section and now have no idea what the issue can be, I just keep going around in circles.

Any help would be greatly appreciated.

See the Pen QWzqxvw?editors=1010 by bath-website-designs (@bath-website-designs) on CodePen

[mvaneijgen]

Hi @furley, there is loads going on in your pen. I was wondering if it could be simpler like the pen below? Hope it helps and happy tweening! 

 

See the Pen zYyEJvg?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[furley]

Hi @mvaneijgen thanks for the quick response, I definitely like the idea of making it simple but the start and the end need to the when the section meets the bottom of the logo and the end of the logo I have updated it here you can see it kind of working but for some reason it goes black to begin with then goes white. and the placement is off it should follow the line of section I popped a green box around it to show the area the actually text takes up in case that's causing an issue?

the start and end point could just be hardcoded in theory as its a fixed position but even doing that it didn't run smoothly?

See the Pen jOXGvQR?editors=0110 by bath-website-designs (@bath-website-designs) on CodePen

Any ideas thanks again

[furley]

Anybody have any ideas on this?

It seems so close but something is not working?

[mvaneijgen]

The mask was throwing me off, so I didn't find an easy solution.

 

So instead of using a mask in my example I've used a CSS clip-path with some CSS tweaks. Everything is hard coded now, because I didn't find the time to get all the offsets dynamically. 

 

The important thing is, that the ScrollTrigger starts when it hits the bottom of the green background and lasts for the height of the element. Also set ease to none, because the default ease will throw things off. 

 

Here is an example that also animates it away

 

See the Pen gOZXLdy?editors=0011 by mvaneijgen (@mvaneijgen) on CodePen

 

or here where it resets every time. I don't have time at the moment to make it fully dynamic where the animation flips between black and white with the same effect, but this should be doable with some .set() tweens that change the appearance of the elements. Hope it helps and happy tweening! 

 

See the Pen GRPONYe?editors=0011 by mvaneijgen (@mvaneijgen) on CodePen

[furley]

You legend @mvaneijgen!!!
Perfect thanks for your time I will have a play with it and come back with the tweaked code just in case it helps anyone else in the future.