How to fade in and fade out in ScrollTrigger?

[DMT82]

Hi,

I'm trying to create a text fade in from opacity 0 to 1, then be there while still scrolling and then fade out from the page.
I have tried gsap.fromTo with scrollTrigger, but it wont work.
All i can do right now is that the text is visible and when you scroll, it fades out.

But the goal is: scroll -> fade in -> full visible (still scrolling) -> fade out.

Can it be done with gsap.fromTo and scrollTrigger? Do I need a timeline?

See the Pen WNwMbeB by DMT82 (@DMT82) on CodePen

[akapowl]

 

Hey @DMT82

 

First off, you'd need to set your h2's opacity to 0 - either via CSS or with gsap.set for example.

 

For what you want to achieve, you might actually be best off with using a timeline.

I think, if you wanted to keep the scrub, you'd have to tween back to opacity 0 in a second tween, half way into the timeline, like so:

 

tl
  .to('h2', { opacity: 1, duration: 0.5 })
  .to('h2', { opacity: 0, duration: 0.5 }, 0.5)
;

 

 

 

But I also added an example without scrub (commented out) in this following pen, just in case you might prefer this option.

 

See the Pen 635c5f784a7227c90d94b0769f48e942 by akapowl (@akapowl) on CodePen

 

 

 

Hope this helps.

Paul

 

 

 

Edit:

If you want to keep the scrub, but also want to keep the opacity of your h2 at 1 for a longer period during that ScrollTrigger-duration, you could adjust the relative duration of the tweens in that tl and the relative starting point of the second tween within that timeline like so, for example:

 

 tl
   .to('h2', { opacity: 1, duration: 0.1 })
   .to('h2', { opacity: 0, duration: 0.1 }, 0.9)
 ;

 

 

 

Durations in ScrollTrigger- timelines with scrub applied do work a bit different from durations in other timelines.

For more info, check this section in the docs:

 

How does duration work with scrub: true?

If you have a ScrollTrigger scrub: true and that ScrollTrigger has a timeline or tween animation associated with it, the durations of tweens within that animation serve as proportions for the total amount of distance that the tween will play.

 

 

https://greensock.com/docs/v3/Plugins/ScrollTrigger#scrub

 

 

[DMT82]

Thank you so much for this answer. It worked and I now understand the basics of a timeline and how it works and what scrub do.
I have two following questions.

1. In your example, the h2 starts to fade in (start trigger) and then fade out. (end trigger) It is never full visible 100% for like 200px.
Is there a way to make more start/end to one element? So start -> fade in until it hits the end, then after end, it is full visible for couple of pixels until it hits a new start when it starts to fade out until it hits a new end?

2. What if there are multiple h2s, paragraphs in different positions and i wanted to put them all inside one timeline.
I have tried to make it happen, and this is what I created. So multiple texts that need to fade in and out in same timeline so i dont have to put in so much code in the js, but this way i cant fade out the second one and have no power to add start/end to it.


An updated Pen.

 

[akapowl]

On 9/8/2020 at 11:24 AM, DMT82 said:

1. In your example, the h2 starts to fade in (start trigger) and then fade out. (end trigger) It is never full visible 100% for like 200px.
Is there a way to make more start/end to one element? So start -> fade in until it hits the end, then after end, it is full visible for couple of pixels until it hits a new start when it starts to fade out until it hits a new end?

 

Of course, you could also set up different ScrollTriggers - one for the fade-in part and one for the fade-out part - if you wanted.

 

But if I understood you correctly, then the suggested timeline in my [Edit] at the end of my previous answer should do exactly what you are asking here.

Try playing with the timing to get the desired effect.

 

See the Pen 05ee33b082ade594f0fcd2624e3720a6 by akapowl (@akapowl) on CodePen

 

 

 

 

On 9/8/2020 at 11:24 AM, DMT82 said:

2. What if there are multiple h2s, paragraphs in different positions and i wanted to put them all inside one timeline.
I have tried to make it happen, and this is what I created. So multiple texts that need to fade in and out in same timeline so i dont have to put in so much code in the js, but this way i cant fade out the second one and have no power to add start/end to it.

 

There is no actual neeed, to set up extra tweens inside of that timeline.

Though, if you did it like you tried, you would have to adjust the timings accordingly.

Maybe read over the timing-section once more, to truly understand what's going on there - it's a bit tricky to wrap your head around the relativity at first.

 

If you only have the headlines in this one section, you want to animate, you could just apply a stagger to the tweens and it should do the trick, like so:

 

 tl
   .to('h2, h3', { opacity: 1, duration: 0.2, stagger: 0.1 })
   .to('h2, h3', { opacity: 0, duration: 0.2, stagger: 0.1 }, 0.8)
 ;

 

See the Pen 12f5500303f32e3324856be632e43576 by akapowl (@akapowl) on CodePen

 

 

 

If you have multiple sections where you want that similar animation to happen at a later point on the page, though, you're probably better off to loop over all the headlines in your code and set up an individual ScrollTrigger for each of those.

 

You put all the elements you want to be affected into an array - can use GSAP's utils.toArray for that

 

var headlines = gsap.utils.toArray("h2, h3");

 

And then forEach of those headlines, you set up the ScrollTrigger with a timeline, like in this pen

 

See the Pen ca1b7d7dbf5f965b1b6a2190059512ba by akapowl (@akapowl) on CodePen

 

 

Is this more like what you thought of?

 

EDIT: 

Whoops.

I was accidently changing up that last codepen, when working on another solution. It should be reverted to its original state now.

 

[akapowl]

 

Coming to think of it again, maybe it's best to loop over the sections instead, and create a Scrolltrigger with that staggered timeline for each section. Added some more sections to show what I mean in this pen

 

See the Pen c51fecdf434ba1d2f8707a5d0a94dceb by akapowl (@akapowl) on CodePen

 

I really hope, I am not overwhelming you at this point. 🙈

 

[DMT82]

This is amazing, not overwhelming at all.
Thank you so much for taking the time and showing me and solving this for me.

 

And the one with Arrays was exactkly what I wanted. i have 1 h1, 1 h2, and 15 paragraphs in 6 different sections that need to fade in and out when am scrolling, will try that out and see how it will work.