Jump to content
Search Community

Achieving a smooth fade transition between two elements by pinning

_josch test
Moderator Tag

Go to solution Solved by akapowl,

Recommended Posts

Hello!

I am trying to achieve this effect: https://gyazo.com/477dc2ab463c6e8b6f58796a9d261799 

When scrolling down a section, a title appears in the middle of the screen and fades out after a while and as soon as the animation starts.

 

This is what I managed to achieve: https://gyazo.com/5a03349a7ebe86097397ddf9734374d7

I've experiemented with the z-index, with pinning different stuff but could not get close to achieving the effect mentioned above. How do I get the title to go way closer to the animation so that when the fading-out of the title ends, the very next moment the animation already starts?

I've read about layered pinning and pinSpacing but am not sure if that's what is needed here.

 

I tried making a minimal codepen here:  but did not manage to get the animation canvas inside because the folder with the images is just on my PC. 

 

This code is running the animation of the pipe after the headline: https://gyazo.com/3467bcd6a668ab38b4fb4340e7bab713 

And the code that handles the Heading Animation is inside the codepen.

 

Thanks for reading and maybe someone knows how to achieve the effect mentioned at the start of this post.

Cheers!

See the Pen yLzmdMv by jorsch (@jorsch) on CodePen

Link to comment
Share on other sites

Hey Josh,

 

Here's how you could to that title effect - I expanded your timeline a bit there

 

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

 

 

 

You can adjust the overall scroll-duration of a ScrollTrigger (and thus the overall duration of an associated scrubbing timeline) by setting its end.

 

You can adjust durations of individual tweens in that timeline to make them happen over a fraction of that overall duration.

 

And you can position them along the timeline via the position parameter, to make sure they happen at the right time.

 

 

 

For getting an understanding of how durations work with scrubbing ScrollTriggers I recommend taking a look on what the docs say...

 

https://greensock.com/docs/v3/Plugins/ScrollTrigger/#scrub

 

...and what should help for getting a better picture of that, is take a look at Cassie's explanations in these threads here e.g., they're awesome.

 

 

 

 

 

Edit:

As an addition to all mentioned above;

 

For figuring out where a ScrollTrigger is supposed to stop, it can be really helpful to use the endTrigger property alongside a set end. This way you can trigger things based on one element's position on the page and end them based on another element's position on the page, like so e.g.

 

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

 

  • Like 5
Link to comment
Share on other sites

offtopic:

19 hours ago, _josch said:

but did not manage to get the animation canvas inside because the folder with the images is just on my PC. 

In codepen you can upload you files only on PRO Plans, or you can use external images or imagegenerators (example, example, example) and just focused on code

 

If you need specific images or it doesn’t work with these images, but everything works with others, then you can use codesandbox

  • Like 5
Link to comment
Share on other sites

Thank you very much @akapowl and @_Greg _ for the replies!

 

The video explaining position parameters was very informative! Cassie's explanation of the delays was also very helpful because I didn't know that the duration was linked to the scroll position on scrub. 

One weird thing I've noticed after applying the code principles you've used in your CodePen is that the heading animation gets "cut off" by the following section like this: https://gyazo.com/045c4b07984cc23d0e097b66de98d438

So instead of coming close to the following animation and fading out, it seems like the following section just "slides over it". I've tried using the z-index to fix this issue in CSS, however that approach did not seem to work - do you have an idea why this occurs?

 

Thanks again for the reply, it was a great help not only for this project but also for the coming animations! :)

  • Like 1
Link to comment
Share on other sites

12 minutes ago, _josch said:

So instead of coming close to the following animation and fading out, it seems like the following section just "slides over it". I've tried using the z-index to fix this issue in CSS, however that approach did not seem to work - do you have an idea why this occurs?

 

The marker looks to be where you want, so maybe the image/ section is not positioned correctly?

 

Sorry, but it's close to impossible to say what the reason for that is, without seeing the code, as it can have too many various reasons.

 

As always, a minimal demo helps a lot for helping you.

 

  • Like 3
Link to comment
Share on other sites

Hey akapowl,

While making the demo I think I found out what the issue is.

In order for the title to be visible, the content needs to have a defnied height, of say, 100vh.

 

However, as soon as the title reaches that end and the animation is not finished yet, it abruptly cuts off because the section is over / there is no more space for the animation. It does not go into the next section, e.g. the slideshow-body-content, which it should. 

That becomes apparent when giving the container of the headline a height of 150vh, where there is enough vertical space for the animation to finish before the next section is reached. 

 

For some reason, in the codepen I made to demonstrate to you what's NOT working, it is working and I have no idea why: 

See the Pen QWOLmYa by jorsch (@jorsch) on CodePen

 

I hope you understand what the issue is and maybe have an idea how it could occurr. Thanks!

Link to comment
Share on other sites

  • Solution

I would really suggest using the endTrigger property for something like this (like I added at the end of my first response - maybe you didn't see it) that way you won't have to calculate how long your ScrollTrigger is supposed to scrub (the '+=125%' in the first pen was just a guesstimate) and could just set the section's height to whatever feels comforable for you and technically you wouldn't have to worry about the other section hiding your headline - well, as long as it is not w wrong positioning of the image causing the issue.

 

Other than that, I'm afraid, I can not tell you anyhting else.

 

Here is the mentioned pen from above again:

 

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

 

 

 

Edit

I think it could very well come down to 'wrong' positioning, too. You should probably move your canvas to the subsequent section to make sure they don't overlap - it wasn't visible before, so I just now noticed you have it inside that same section.

 

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

 

  • Like 3
Link to comment
Share on other sites

Thanks for the reply, that was actually the problem!

I've now devided the heading and the canvas into 2 different sections and the problem is no more :)

 

I must've actually missed the endTrigger bit.

Since I'm quite new to gsap / scrollTrigger: is it best practice to write the endTrigger this way: "end: "top 15%" or is there a better way to write this? Because I saw some people calculate the ending with end: () => ... and was wondering why they did this and if it provided better responsive qualities.

 

Thank you akapowl very much for taking the time out of your day to answer my question, I highly appreciate that.

 

  • Like 2
Link to comment
Share on other sites

My pleasure - good to hear it works for you now :) 

 

I guess 'best practice' would be to use the syntax provided by ScrollTrigger whenever you can, yes, because like with everything related to GSAP; for the vast majority of usecases it just works (as it is pretty clever) - even with resizes.

 

However there are scenarios where you can not or might not want to make things dependent on the position / dimensions of the trigger element(s) that ScrollTrigger hooks into - like in a fake-horizontal-scroll where you scroll vertically but tween a section horizontally e.g. you might want to make the end dependent on the width of the section for the tween to feel 'natural'. But since you are scrolling vertically, if you used something like end: 'bottom bottom' or end: "+=100%" wouldn't give you the desired / required result. That's where you can feed ScrollTrigger with other values like e.g. end: '+=' + section.scrollWidth

 

By making the value a function (arrow function in this case () => )  you can tell ScrollTrigger to get that value fresh on every refresh, which will be neccessary for resizes - if you didn't in a case as the above, ScrollTrigger would always keep on working with the value that it was fed with initially.

 

Does that clear things up a bit?

 

Edit:

I just realized that you were using rather old versions of GSAP & ScrollTrigger (and different versions of each). I would strongly suggest updating to a more recent version (and also keeping the versions of GSAP & ScrollTrigger in sync), as there have been quite some additions, fixes and tweaks since the versions you are using in your demos.

 

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