Jump to content
Search Community

ScrollTrigger fade image in place scroll text

flowgrow test
Moderator Tag

Recommended Posts

Hey guys,

 

this is my first time working with GSAP and ScrollTriggers. Up until now, I usually hacked together my own scroll handler and was never quite happy with the result.

I'm having some troubles getting the exact effect I want to happen.

What I would want to happen ideally is the following.

When first scrolling to the section with the text and image, I would like for them both to fade in from {opacity 0, translateY: 100px}.

For the following ".point" divs, I would want the image on the right to be replaced with the next image with a cross fade, and the text should also cross fade but also with some vertical motion (e.g. new text from {translateY:100px} old text going to {translateY: -100px}.

 

The indicators on the left should ideally also change to active, as soon as we reach the section.

 

From what I have seen in previous discussions, this community seems to be quick to help,

Thank you in advance!

 


 

See the Pen eYZpoXa by flowgrow (@flowgrow) on CodePen

  • Like 1
Link to comment
Share on other sites

Hey flowgrow and welcome to the GreenSock forums. 

 

What aspect of your demo that you shared is not working like you hope for it to be working? Just the indicators?

 

Side notes:

  • You should probably just use the y property instead of translateY (y: 100).
  • We recommend putting the duration inside of the vars parameter. Doing so also allows you to use GSAP's defaults if you'd like to.
Link to comment
Share on other sites

Hi Zach, thanks for your reply!

 

Right now, all sorts of things aren't working the way I would want them to. 😛

I uploaded a video of what I could do in Figma prototypes, but with clicks, rather than scrolling:

Ideal Animation video

 

Currently, I am animating the whole ".point" divs but ideally I would like to have the images on the right always stay in the center of the screen, and only change via cross-fade. And only the text should be moving up.

 

Also I am using "position:sticky" instead of  "pin:true" because pin:true pins it to the center of the window instead of the top.

 

I'll be reading through the common mistakes link, to see where I can improve 😊

Link to comment
Share on other sites

Hi Zach, 

 

thanks for your help, I ended up thinking of my own way of achieving what I want, you can see the end result in the updated codepen at the top.

The only problem I have right now, is that I would want the animation to start at "top bottom" or "top center" but, when I do that in combination with "pin: true"  the outer block also gets pinned at either "bottom" or "center". Is there any way, I can pin the block at a different position than the start of the timeline? 

Link to comment
Share on other sites

  • 7 months later...

I would like to ask for some help here as this discussion is relevant to my problem. Apologies by the way I am mainly a backend dev but trying to get familiar with GSAP, javascript, jQuery all at once :)

 

So i reused the code, and a massive thank you, from the first post but when I wrap the article and the image tags into a div everything goes wrong. Only the last section appears after some scrolling. 

 

I am also trying to learn how to use the library so all help is much appreciated. If not still have a good day.

 

See the Pen NWbJeGJ by ervinbosenbacher (@ervinbosenbacher) on CodePen

 

Link to comment
Share on other sites

Hey @ErvinB and welcome to the GreenSock forums.

 

A few notes:

  • First off, upgrade the GSAP and ScrollTrigger version to the latest (3.6.0 currently). There have been some bug fixes and new features since the version that you're using.
  • Adding a duration in the timeline vars doesn't make much sense. Also the duration of the timeline itself doesn't matter when the timeline is attached to a ScrollTrigger with a scrub. It think it'd really benefit you to better understand how scrubbing works.
  • z-index is one of your issues. If you have any elements showing (like the white background on the right section) or if you need anything in the sections to be clickable then you need to manage the z-index as a part of the animation.

Here's an updated demo to get you started:

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

You can see that the fade in can be seen now but the z-index being switched causes the new content to be seen immediately. I'd probably fade it in instead of showing it all at once. Or not use background colors on the points themselves but instead apply the color to the container.

  • Like 2
Link to comment
Share on other sites

  • 2 weeks later...
  • 2 years later...

Hey guys, hope all is well.  

I'm super new to the game and trying to piece together a nice looking scroll effect to a website I'm building.  The example below caught my eye and is absolutely perfect for what I'd like to use.  However would someone mind showing/telling me how I could get the thin bars to the left of each paragraph clickable so that I could manually click between each title in addition to having this awesome slider effect already there. 

Thanks ever so much.

Dan

 

Link to comment
Share on other sites

 

Welcome to the forum @Danoz2411

 

If you want to make the indicators clickable, you'll first need to make them accessible for mouse events, because now, albeit not visually,  they are burried below other elements - in the example below I put a high z-index on their parent element, to change that.

 

Since you are super new to this, for adding functionality on click via JS, you'll want to read up on the click event...

 

https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event

 

...and getting familiar with loops will probably come in handy for this, too; e.g. the forEach loop.

 

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach

 

 

ScrollTrigger does have a .labelToScroll() method (since version 3.9.0 - so you'll need to update the GSAP and ST versions, as I did in my demo below) that makes it easy to get the scroll-position of a label placed on a timeline that is hooked up to a ScrollTrigger.

 

For the actual auto-scrolling part you could combine all of the mentioned above with GreenSock's ScrollToPlugin, meaning;

  • when looping over all the points and adding the tweens to the timeline, at an appropriate point, add a unique label to the timeline(e.g. by using the index as an identifier)
  • loop over all the indicators and forEach of the indicators add a click event
  • in the function that is triggered by that event add a tween that leverages the ScrollToPlugin to scrollTo the respective labelToScroll (e.g. by using the index as an identifier)
     

That could look something like this, then:

 

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

 

 

 

Now, with a bit of experience this was easy enough to do and short enough to explain - but for future questions, it would be great, if you could show us something you have tried yourself on that you are struggling and need help/clarification with, because this forum is not actually intended to provide full on solutions/explanations for any given effect/functionality from scratch.

 

Nonetheless, I hope this will help you get a clearer picture. Happy tweening!

 

  • Like 3
Link to comment
Share on other sites

akapowl thanks ever so much for the in-depth explanation and my apologies for the delayed response.   Really generous of you to go into so much detail as well as demonstrate an example which will help me understand the process a lot better.

Moving forward though I will most definitely bring some work to show before hand.....my apologies for that this time, I didn't realise.
Generally though I'm very impressed with the forum and look forward to learning more with you guys moving forward.

Thanks ever so much again.

  • Like 3
Link to comment
Share on other sites

  • 1 month later...

Hello there, I am using the above scrolltrigger code but I wanted to add toggle class to the texts when comes into view. For example in the article  element i wanted to add class. I tried to add it but the class is adding but not getting toggled. Here is the code i tried... 

 

See the Pen JjejpGv by mr_ashish (@mr_ashish) on CodePen

 

Edit: I have updated my pen, now the class is getting toggled in each article element but upon scrolling back to top its glitching, can you guys help me fix that.

 

Thanks,

Ashish

Link to comment
Share on other sites

Hello Ashish, welcome to the GSAP forum.

 

I would suggest not adding custom logic in scroll-event listeners in the forEach loop like you do - for one, ScrollTrigger & GSAP do have methods that should make that redundant - and on the other hand, solving custom logic issues like that is not really within what these forums are intended for.

 

Here are two possible ideas you could go about that in more GSAP-y ways:
 

1) I see that you already tried adding toggleClass - but from a logical point of view, where you tried to add it, doesn't make much sense - Using it on the pinner-ScrollTrigger (also the way you have it set up) will not have much effect on the individual texts of the individual titles - this would only toggle the class on start and end of pinning on the element you selected as the trigger.

 

If you wanted to use toggleClass, you would likely have to create new ScrollTriggers forEach of your points, targetting only the respective texts within that 'point' and e.g. calculate their start and end depending on the wrapping element that is not getting pinned. Now this will become a bit tricky, since there is a discrepancy between the distance of pinning that is calculated depending on the amount of all elements and the amount of elements getting animated fully vs only-in (the last one) - so the distribution of tweens is not even across the scroll-duration so to say.

 

I don't have the time to figure out the formula for you, but it appears to work decently with these values - of course things also depend heavily on how and when exactly you want to add/remove the class, so that is something for you to figure out.

 

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

 

 

 

2) Another way to approach this would be to e.g. .call() functions with custom logic from within the timeline at certain points. That would then be easy enough for all panels but the last - but while tinkering with it I found that the last on would need sort of a special treatment depending on scroll-direction, which is why I also added a ScrollTrigger that only has the function to update a variable for that. Here again, thins mostly come down to timing and logic.

 

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

 

 

 

There might even be other, more consice ways to do achieve this, that I didn't think of; but maybe one of these approaches can help you figure things out. Good luck with the project.

 

  • Like 3
Link to comment
Share on other sites

8 minutes ago, Ashish Sngh said:

I am trying to change the position of active class from the p tag to where the class="point" is but it is not working so far.

 

Instead of targeting the text that I created as a variable in the forEach loop, just target the point itself - the elements aare being looped over in that forEach loop, and each one of them can be accessed by using elem in there, as is declared here:

 

points.forEach(function(elem, i) {	// <----------

  ...

})

 

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

  • Like 3
Link to comment
Share on other sites

@akapowl Thanks for your help so far. I have modified the code according to my needs which is working so far but the indicators seems to be broken, its not working on click in my code, I tried to figure out the issues but can't get over it. If you can check and make it work, it would be really great.

 

I haven't modified the indicators code but don't know why it is not working. I have included the pen below:

 

See the Pen rNQxpJo by mr_ashish (@mr_ashish) on CodePen

Link to comment
Share on other sites

Step 1 to de-bugging almost always should be to open the console in your dev-tools.

 

When you do that, you'll see a whole lot of errors pointing you to where your problem might originate from.

 

1.thumb.png.eaaf20ea170620ec24e025ea7f174bc9.png

 

 

These errors  mention a failure in executing "scrollTo".

That is because you forgot to load the ScrollToPlugin in your codepen, which you can check when clicking the cogwheel in the upper right portion of the JS section. Load the Plugin and they should start working again.

2.thumb.png.2db40f60b40bc9ce8b6da6d2f655093c.png
 

 

 

  • Like 3
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...