ScrollTrigger - Fade In - Out

[Degendev]

Hi!

 

I'm quite new to GSAP and have been busy all day trying to get something work.
I use the <main> element as my wrapper for all of my sections, what I would like to have is that every heading (in this case)

will fade in when the right section is in view (based on scroll position).

 

The <main> in this case is pinned, but it's bugging out. it doesn't seem to be pinned as my header does, it's partly pushed down and the headings are not fading in and out.

I've seen multiple demos and tried working it out but I can;t get it to work, any help is appreciated!

 

 

See the Pen PoReGBE by degendev (@degendev) on CodePen

[GreenSock]

I'm not entirely sure what you're trying to do there, but if you're going to pin the container of a trigger element, you need to define that as a pinnedContainer: 

See the Pen dymeJMo?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Here's a simplified one (it may not be helpful):

See the Pen XWEqVXO?editors=0110 by GreenSock (@GreenSock) on CodePen

 

Does that clear things up?

[Degendev]

Hi @GreenSock

First of all, thanks for your reply!

I think my initial description wasn't clear enough, what I'm trying to achieve is the following.
I want my main wrapper to be pinned, so as the user scrolls down and reached the main wrapper pin it.
After that I currently have 2 sections in my example, both sections contain a headline.
Once the user hits the first section (100% of screenheight) and the user starts scrolling down, the headline within that section should fade in and out relative to it's scrolled position in said section.

 

e.g: first 25% scroll is fading in, 50% is full opacity, last 25% scrolll is fading out the heading.

Then the user will hit the second section and the same behavior applies, this should give the user the impression they're scrollin in the page while the headings are fading in and out. and once they scrolled past the last section the pinned container should be unpinned and normal scroll behavior applies.

 

The difficulties i'm having now is that the headings aren't fading in properly relative to the scrolled position of it's section, I want the headings to be position fixed (centered in the section container) but this negates what i'm trying to achieve for some reason... on top of that the main wrapper wouldn't pin

I hope this makes more sense, if not (which I can understand) here's a example video of what i'm trying to achieve; https://streamable.com/lx8995
Imagine the common, uncommon, and rare as sections as where the headings are fading in-out based on scroll position.

[Cassie]

Hey there!

We're happy to answer questions about the API here - but we don't really have the capacity to guide people through lists of requirements.
 

Just checking whether you've watched the ScrollTrigger video? It's got a ton of helpful information in there.
 

For what it's worth, it doesn't look like there's any pinning going on in that example, I'd position some headings in fixed/absolute position on top of each other and fade them in and out as I hit certain positions on scroll.

Another tip is to get the animation working wothout scrolltrigger first, then hook the timeline up to scroll.

Good luck! The video should be a huge help, if not, pop back with any questions you have.