ScrollTrigger action starts as soon as page loads

[Antonio78]

Hi,

I've been trying to do a simple scrollTrigger action: an elements that enters the viewport makes another element fade out, that's it. But this time the action starts on page load and not when my triggers pass the scroller-start.

This is my code.

I tried to set a longer duration to see what happens but the #header_logo starts at opacity 0 without tweening, as If I had set gsap.set instead of gsap.to.

Do you see anything wrong with my code? 

Thank you.

 

ScrollTrigger.create({
  trigger: '#logo_footer',
  start: 'top 80%',
  end: 'bottom 20%',
  animation: gsap.to('#header_logo', {duration: 1, autoAlpha: 0}),
  markers: true
})

 

[OSUblake]

Hi Antonio,

 

If you need help, please provide a minimal demo. Thanks!

 

[Antonio78]

2 hours ago, OSUblake said:

Hi Antonio,

 

If you need help, please provide a minimal demo. Thanks!

 

Hi OSUblake,

It's not easy to provide a demo but I can show you the website, hope it helps.

 

The #header_logo element should be hidden at start, then become visibile after 200px scrolling, then fade out when #logo_footer enters the viewport at 80%.

 

The code is in main.js at line 196.

 

Thank you.

 

 

[OSUblake]

Sorry, but it's hard to troubleshoot a live site. 

 

It only takes a couple minutes to make a minimal demo. We are not asking to see your entire project, just the bare minimum need to recreate the issue. The simpler, the better.

[Antonio78]

Here is the pen.

As you can see there is a  #logo_header that starts already faded out because of the animation: gsap.to('#logo_header', {duration: 3, autoAlpha: 0}). 

 

See the Pen poppOdR by antoniostarace78 (@antoniostarace78) on CodePen

 

[PointC]

animation: gsap.to('#logo_header', {duration: 3, autoAlpha: 0, immediateRender:false}),

 

[OSUblake]

I would also suggest looking at this thread about opacity animations.

 

 

[Antonio78]

49 minutes ago, PointC said:

animation: gsap.to('#logo_header', {duration: 3, autoAlpha: 0, immediateRender:false}),

 

Thank you PointC, this seems to work.

 

Just one question, is this the way it is supposed to work?

I mean, the tween should start only when the trigger passes the starting point, it should not be necessary to use immediateRender:false.

If I add an onComplete event, it starts right after the page loads, so I assume that the tween starts anyway sooner than it should.

 

Is there something I'm missing?

[PointC]

You have a situation where you're animating the same property of the same element with two ScrollTriggers. The values are cached up front when the ST is created so, in this case, we need to set immediateRender:false on the second one. Another option would be to use a fromTo() tween. 

 

This is discussed in more detail here:

Happy tweening.

 

[Antonio78]

14 hours ago, PointC said:

You have a situation where you're animating the same property of the same element with two ScrollTriggers. The values are cached up front when the ST is created so, in this case, we need to set immediateRender:false on the second one. Another option would be to use a fromTo() tween. 

 

This is discussed in more detail here:

Happy tweening.

 

 

I am familiar with this article but will definitely have to read it again. 

I have another question, just out of curiosity.  At first I make the logo fade in with a css class, but then I make it fade out with a gsap action. 

I usually do it this way: what can be done with css I do with css, what is more handy to do with gsap I do with gsap.
Is it wrong to use this kind of mixed technique on same elements?

[PointC]

If it's a property I plan to animate, I usually set it and animate it with GSAP to avoid any little problems. That's just my workflow though. YMMV. 

 

Happy tweening.