Jump to content
GreenSock

jimmy-a

Fade In pinned images on scroll

By jimmy-a, in GSAP. Views: 7,798

Moderator Tag

Recommended Posts

Posted

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
Posted

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 2
  • Thanks 1
Link to comment
Share on other sites
  • Author
Posted
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...
Posted

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
Posted

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

Link to comment
Share on other sites
  • 6 months later...
Posted

Hi, everybody.

 

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

 

Thanks. 

Link to comment
Share on other sites
Posted

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
Posted

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
Posted

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
Posted

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
Posted
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
Posted
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...
Posted

I'm also looking for the same component in the webflow but don't know how to do this with only jquery without react can any one help me with this?

Link to comment
Share on other sites
Posted

 

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
Posted

@akapowl Thankzz alot that's a great help indeed. i just have one more issue 
 i had placed two components with same effect (one after the other ) of sticky scroll trigger but when i'm done with the scrolling of the first one it fades out instead of scrolling up 

 

any help on that?

Link to comment
Share on other sites
Posted

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

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
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
Login Create Account