Jump to content
Search Community

Fade In pinned images on scroll

jimmy-a test
Moderator Tag

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

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

  • 6 months later...

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

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

  • 10 months later...

 

Welcome to the forum @Hitendra

 

There are examples above, which are not using React. So all you'd need to do is apply the changes mentioned further down the line to those examples.

 

Also, there really is no need for jQuery as in those demos it isn't even any helpful.

 

Here you go.

 

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

 

  • Like 2
Link to comment
Share on other sites

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or CodeSandbox that demonstrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo

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

 

If you're using something like React/Next/Nuxt/Gatsby or some other framework, you may find CodeSandbox easier to use. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

Link to comment
Share on other sites

  • 1 year later...
On 11/4/2022 at 4:06 PM, akapowl said:

Hello thanks for this Demo.
Can we pin main section and change inner light gray main service section on scroll for different services ?
Our Service should be all time visible.
I am using NEXT.JS component.

 

Services.jpg

Link to comment
Share on other sites

It's very difficult to troubleshoot without a minimal demo; the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or Stackblitz that illustrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best. See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo

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

 

Using a framework/library like React, Vue, Next, etc.? 

CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import the gsap-trial NPM package for using any of the bonus plugins: 

 

Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

Link to comment
Share on other sites

Hi,

 

Your demo does not reflect the actual result you're trying to achieve, based on the image you posted.

 

Also you're not doing proper cleanup and you're not using the useGSAP hook neither. I would strongly recommend you to first focus on getting the animation you're after working as expected first. Once the animation is working as expected you can plug ScrollTrigger into the mix.

 

Maybe you're looking for something similar to these demos:

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

 

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

 

Finally I strongly recommend you to check the resources for correctly using GSAP in react projects:

https://gsap.com/resources/React

 

Hopefully this helps.

Happy Tweening!

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.
×
×
  • Create New...