Changing navbar color (via data attributes) using ScrollTrigger

[Banddev]

I am stuck with a weird issue. 

I would like to change the colour of the navbar based of the position of other elements.

I am able to achieve the basic, one section after the other, all good with this.

My issue is that I would like to trigger a different behaviour with some elements within a section. (a section within another section)

it kind of works but only when I scroll down, when I scroll up doesn't work.

could you please point me in the right direction? 





 

See the Pen oNMWZNN by mp1985 (@mp1985) on CodePen

[Rodrigo]

Hi,

 

@Carl has you covered with this great video and a codepen example as well (be sure to watch the entire video in order to truly and clearly understand the process):

 

Also you should definitely check Carl's GSAP courses, he's a great teacher and you'll find hundreds of great lessons as good as the video above:

https://www.creativecodingclub.com/bundles/creative-coding-club?ref=44f484

 

Hopefully this helps. Let us know if you have more questions.

Happy Tweening!

[Carl]

thanks for the kind words @Rodrigo 

 

Here's the demo for easier access

 

See the Pen KKvQOKY?editors=0010 by snorkltv (@snorkltv) on CodePen

 

I suspect it wouldn't be too hard to change it to read a color from data-attribute on the trigger (section) instead of pulling it from an array.

 

 

[Banddev]

thanks @Rodrigo @Carl i didn't know about onEnterBack and onLeaveBack. 
I will defo take a look at Carl's GSAP courses.

I updated the codepen  , now it works, but I am not sure if there is a nicer way to write that code.

 

I have a bigger issue now, I can't understand why it is doing this, for some reason, when I land on the page, I can see the scrolltrigger "start/end" at the top of the page (even if there is not any trigger element there).

 

if I scroll down, and I scroll back up, and again scroll down and up, the scrolltrigger code works as expected; the problem is only when I land on the page and I didn't scroll till the next section.

any idea why it is doing this? I can't replicate this on codepen, I upload a screenshot and a screencast here https://we.tl/t-RPnHGNxJIj.
from the screencast you can see that the logo and the burger is grey when you land on the page, then you scroll and scroll up and the logo is correctly white. the problem is just when you land at the top of the page.

 

is it a common issue with an easy fix?

is there any sort of "trigger" that I can call to "fake refresh" the page?

could you please point me in the right direction? 
 

 

 

[Rodrigo]

Hi,

 

Clearly the start and end points for that are wrong. If it works in codepen maybe something else is the culprit, perhaps look into waiting for all the images to be loaded before or force the scroll to be down and then back to 0 in order to force that rendering. If I was you though for that section I'll set the initial color to white until I find the underlying issue.

 

Finally no need for the double negatives here:

ScrollTrigger.create({
  trigger: section,
  start: 'top top-=-80',
  end: 'bottom top-=-80',
  toggleClass: {
    targets: elementToModify,
    className: 'has-scrolled'
  },
  markers: true
})

This is the same:

ScrollTrigger.create({
  trigger: section,
  start: 'top top+=80',
  end: 'bottom top+=80',
  toggleClass: {
    targets: elementToModify,
    className: 'has-scrolled'
  },
  markers: true
});

Hopefully this clear things up.

 

Happy Tweening!

[Banddev]

thanks @Rodrigo, I think that I found out why it is doing this.

I created a simplified codepen just with this.

See the Pen BaPdLYp by mp1985 (@mp1985) on CodePen

 

the issue is caused because in the CSS I hide the last li in the list and because of this Scrolltrigger adds a start point at the top of the page.

 

If I delete this CSS code, everything works as expected

 

.row .col-4:last-child {
   display: none;
}

 

is there something I should be aware of when I want to hide/show elements with CSS? any idea why is doing this?

basically, I would like to play around with media queries and show/hide elements.

 

thanks

 

[Banddev]

ok, I think that I found the answer.

 

if i use "height: 0; overflow: hidden;" instead of "display: none;" , it works well.

 

is this a best practice with Scrolltrigger?

[Rodrigo]

Hi,

 

Maybe you could try opacity 0 and visibility hidden. The issue with this approach is that with display none the element is not there, so the parent element and eventually the document's height is off by the height of that last element. You can either offset your ScrollTrigger start and end points or you can use the mix of opacity and visibility if the element will be visible later using ScrollTrigger.

 

Keep in mind that GSAP has autoAlpha which is actually a mix of opacity and visibility:

// Assuming that the CSS has opacity 0 and visibility hidden
gsap.to(".my-element", { autoAlpha: 1 });
// This sets visibility to visible when the animation starts and animates the opacity to 1

This seems to work in your last codepen example:

.row .col-4:last-child {
  opacity: 0;
  visibility: hidden;
}

Let us know if you have more questions.

 

Happy Tweening!