Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
jimmy-a

Fade In pinned images on scroll

Recommended Posts

Hi!

 

I'm trying to replace the "pinned" images effect when scroll (like, those images "going up"), to a "fade in" effect in the images. So, if you scroll from the page top, the next image should appear with fadeIn, and so on with the other images, until the "scroll zone" (.main-wrapper in the Codepen) ends and then comes the "normal" scroll over the other content.

 

I cannot find the way to do it, so I'll share a previous Codepen. 

 

 

See the Pen PoZJYZq by mikeK (@mikeK) on CodePen

Link to comment
Share on other sites

Hey Jimmy. So essentially you want to fix all of the sections in place and transition between them. We show how to do that in one of the demos in the ScrollTrigger docs (this also loops from the beginning and end but if you take that part out it's practically the same):

See the Pen rNOebyo by GreenSock (@GreenSock) on CodePen

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

15 hours ago, ZachSaucier said:

Hey Jimmy. So essentially you want to fix all of the sections in place and transition between them. We show how to do that in one of the demos in the ScrollTrigger docs (this also loops from the beginning and end but if you take that part out it's practically the same):

 

 

 

Hi there! That worked like a charm. Had to change a little bit the HTML & CSS, but it's working.

 

See the Pen KKVvrBY by jimmyadaro (@jimmyadaro) on CodePen

Link to comment
Share on other sites

  • 11 months later...

Hello everyone!

 

Very nice topic!! 

Is there some way to launch this scroll trigger effect, just when the user scrolls down to some div trigger element ??

I mean, How can I start this effect after a user reaches a trigger div ?

Because I don´t want this effect to start from the top of the page.

 

Thanks!! Any advice will be helpfull!!

Link to comment
Share on other sites

Thanks Craig! The demos are really good for doing what I am looking for!

Link to comment
Share on other sites

  • 6 months later...

Hi, everybody.

 

How could i add content (text or whatever) before images in that example?.

 

Thanks. 

Link to comment
Share on other sites

Hello @misticvm

 

It's always best to provide a demo with what you have tried yourself, because as the forum guidelines state, people helping here just don't have the time to craft custom code solutions for everybody coming into the forums.

 

If you want it to work properly with scrollable content above the images, you'll have to rework the markup, CSS and JS logic a bit.

 

Here's my suggestion:

 

  • In the HTML markup move the main-wrapper__title-wrapper into the main-wrapper__panel-wrapper
  • In the CSS styling set the elements that now are fixed or sticky to absolute, add a min-height to the main-wrapper__panel-wrapper and adjust the styling of the main-wrapper__title-wrapper a bit, so it still display correctly.
  • In the JS add a ScrollTrigger that pins the .main-wrapper__panel-wrapper for the duration of the fading-in/fading-out of panels and use the wrapper as the trigger element for all ScrollTriggers so you can calculate the starts and end depending on that trigger to fit nicely. That could then look something like this (you can of course tweek the timing to your liking - just play around with the numbers and see what they do) 

 

ScrollTrigger.create({
  trigger: '.main-wrapper__panel-wrapper',
  start: () => 'top top',
  end: () => "+=" + (panels.length - 1) * innerHeight,
  pin: true
});

panels.forEach((panel, i) => {
  ScrollTrigger.create({
    trigger: ".main-wrapper__panel-wrapper",
    start: () => "top top-=" + (i - 0.5) * innerHeight,
    end: () => "+=" + innerHeight,
    onToggle: self => self.isActive && show_next_hero_panel(panel)
  });
});

 

Since you are now pinning and thus the scroll-height is being adjusted by the pin-spacer, that also eliminates the need for setting the height of the .main-wrapper__panel-wrapper initially.      

 

Hope that will help. Happy scrolling and have a Merry Christmas time.

 

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

 

  • Like 4
Link to comment
Share on other sites

Absolutely awesome, akapowl... Thank you very much.

 

I spent all day yesterday trying to fix that behavior (no success... i finished frustrated). Right now i´m going to try implement your code.

 

Quote

It's always best to provide a demo with what you have tried yourself, because as the forum guidelines state, people helping here just don't have the time to craft custom code solutions for everybody coming into the forums.

 

Sorry about that but that is why i mentioned the original example of this thread. My sincere apologies. 

 

Regards.

  • Like 2
Link to comment
Share on other sites

You markers don't look the same as in this demo, so your you need to adjust your CSS and or HTML to match it.

 

See the Pen bGooOov by GreenSock (@GreenSock) on CodePen

 

Link to comment
Share on other sites

Actually when you are pinning the inner wrapper it would probably be neccessary to use the outer wrapper as the trigger for each of the fading-scrolltriggers as that one will keep scrolling while the inner will be pinned in place. I was wondering before why it worked the way I suggested it before, but didn't have enough time to dig into the setup in detail.

 

Seems to work better then - and I hope this is all fine React-wise, as I am not very familiar with React and just added a ref to the outer wrapper in a similar manner as the inner wrapper has it. Does that work better for you?

 

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

  • Like 1
Link to comment
Share on other sites

42 minutes ago, akapowl said:

Seems to work better then - and I hope this is all fine React-wise, as I am not very familiar with React and just added a ref to the outer wrapper in a similar manner as the inner wrapper has it.

 

Looks good to me.

 

For anyone else looking for React tips, be sure to check out our React guides. You can usually get away with only using 1 ref using the selector utility.

 

https://greensock.com/react

 

  • Like 2
Link to comment
Share on other sites

On 12/23/2021 at 8:23 PM, akapowl said:

Actually when you are pinning the inner wrapper it would probably be neccessary to use the outer wrapper as the trigger for each of the fading-scrolltriggers as that one will keep scrolling while the inner will be pinned in place. I was wondering before why it worked the way I suggested it before, but didn't have enough time to dig into the setup in detail.

Perfect. Now It seems is working without problems.

 

Thank you again!.

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×