ScrollTrigger Opacity Animation

[Christiemade]

I am trying to figure out why my slides don't fade out nicely all the time.  (Sometimes they do).  

In the example, #img_2 does not fade out, it just abruptly cuts away.  (Code that should fade it out starts at line 21)

See the Pen ZELwZMm by christiemade (@christiemade) on CodePen.

[akapowl]

 

Hey Christie,

 

You are creating .to() logic issues here - that is actually one of the most common ScrollTrigger mistakes.

 

Quick fix:

Add immediateRender: false to that second .to() tween on your #img_2 - more generally speaking on any later .to() tween which targets the same element, tweening on the same properties you have tweened on before. Or alternatively follow one of the other suggestions mentioned in the linked article.

 

This should work better now.

 

See the Pen 9b1d76914946fb2e780a10a76a52bc9c by akapowl (@akapowl) on CodePen.

 

[Christiemade]

Derp! Thank you!

I would like to try converting to a timeline, as I think that makes the most sense, but I'm not sure where to put the different triggers.

 

gsap.timeline({
  scrollTrigger: {
    trigger: '.section02',
    scrub: true
  }
})
.to('#img_2', {
  opacity: 1
})
.to('#img_2', {
  opacity: 0
});

Would the .section trigger definitions go within each .to() ? Or does the first timeline variable become an array of scrollTriggers? ?

[akapowl]

 

18 hours ago, Christiemade said:

Would the .section trigger definitions go within each .to() ? Or does the first timeline variable become an array of scrollTriggers?

 

Your first idea here is actually another of the most common ScrollTrigger mistakes and I don't think a timeline object can have multiple scrollTriggers.

 

You'd have to set the trigger to the initial point you want the timeline to start and the end(trigger) to the endpoint and work your way through the timeline via adjusting the durations and position parametes of your individual tweens. For your example that would look something like this (I added a tween on the heading to clarify the concept a bit more). 

 

Understanding how durations and the position parameter work on tweens with scrub applied will be very helpful with that regard.

 

See the Pen 7e76da486b25bef0135e971af5ccd354 by akapowl (@akapowl) on CodePen.