Jump to content
Search Community

Crossfade text inside pinned section

Hirbod test
Moderator Tag

Recommended Posts

Hello everyone,

first of all I would like to thank you. Your tools are by far the best I could ever use. The investment in the membership has already paid off 10x. 
 

I have a conceptual question and I have tried many ways to get it to work correctly but I realize I am barking up the wrong tree.

I have a section that has 100vh height and is pinned. It starts "top top" and ends "+=400%". Inside this section I have 4 text layers. These are also 100vh height and 100vw width and absolutely top/left set to 0. All text layers have an opacity of 0.
 

Everything starts with a blank red section and some firework animation. When reaching 50% (out of 400%) I want to have text layer 1 from opacity 0 reaching opacity 1. Starting from 50% to 100%, I want to begin hiding layer 1 and fade in layer 2. When 100% is reached, I want text layer 1 to be opacity 0 and text layer 2 to be opacity 1. I want the same to continue in increments of 50. So when 150% (out of 400%) is reached, text layer 2 should change from opacity 1 to 0 and likewise at the same time text layer 3 should change from opacity 0 to 1.
 

Somehow I didn't quite understand how to do this with the timelines. The basic animation works, but unfortunately I can't manage to hide the back layer. The whole thing has to work in two directions, of course.

The elements should fade at the same time (with scrub: true). In my current attempts, I get the layers to fade in one after the other using a timeline, but I don't get the back layer to fade out. What is the correct way to do this? Maybe there is an example around I've missed.

Thanks! 

Regards
Hirbod


 

Bildschirmfoto 2021-04-15 um 23.38.19.png

Link to comment
Share on other sites

6 hours ago, Hirbod said:

first of all I would like to thank you. Your tools are by far the best I could ever use. The investment in the membership has already paid off 10x. 

Love hearing that! 🎉

 

6 hours ago, Hirbod said:

Somehow I didn't quite understand how to do this with the timelines. The basic animation works, but unfortunately I can't manage to hide the back layer. The whole thing has to work in two directions, of course.

The elements should fade at the same time (with scrub: true). In my current attempts, I get the layers to fade in one after the other using a timeline, but I don't get the back layer to fade out. What is the correct way to do this? Maybe there is an example around I've missed.

Got a minimal demo? That will exponentially increase your chances of getting a solid answer. It's just tough to troubleshoot blind. :)

 

I'd recommend starting by just building a timeline that does the animation the way you'd want it to when someone scrolls down, but DON'T hook up anything to ScrollTrigger yet. Just focus on the pure timeline and getting things sequenced properly (don't forget that you can use the position parameter to get total control over where things go, how much overlaps, etc.). Once you're happy with that, it should be pretty easy to wire it up to the scroll position with ScrollTrigger. Sometimes people just get too far ahead of themselves and try to do everything at once and focus too heavily ScrollTrigger part, but it's much simpler to just leave that for last. 

 

Good luck!

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

Hi @GreenSock

 

thank you very much for your kind words and your help. Sorry I didn't create a codepen, I thought my explanation was enough to evoke an example from the archive if necessary. Next time I will prepare a codepen.
 

After a lot of back and forth and very intensive testing, I finally figured out how the whole thing works and I also fully understood the timeline. The position parameter ".to(element, { options }, position)" was strange to me but exactly this was the key to my problem. I also finally understood how to arrange the elements and how to use the values relative or absolute).
 

It's a bit complicated to figure out when working with "scrub: true", because the seconds are then percentage values in relation to the total length of the pinning end. It is written in the documentation, but as a beginner it is sometimes a bit more difficult to understand. But it works wonderfully and my scrollytelling page is almost done and looks fabulous. I can't wait to show off the project once it's live in a few weeks. 

 

Thanks for the best JS library in the world.

Link to comment
Share on other sites

1 hour ago, Hirbod said:

It's a bit complicated to figure out when working with "scrub: true", because the seconds are then percentage values in relation to the total length of the pinning end. It is written in the documentation, but as a beginner it is sometimes a bit more difficult to understand.

Yeah, I can see what you mean but I'm not quite sure how to improve the explanation in the docs - got any recommendations? I'm very open to suggestions. 

 

It's one of those things that logically can't be any different - changing the "duration" can't really push the "end" trigger down further on the page. See what I mean? The whole animations must fit between the start and end scroll positions. For example, imagine the "end" is 100px lower than the "start" - we've got 100px worth of scroll to make the animation go from its start to its end, so if you then put a longer animation into the timeline, it isn't as if it could alter the composition of the whole web page to move things further down. 

 

1 hour ago, Hirbod said:

it works wonderfully and my scrollytelling page is almost done and looks fabulous. I can't wait to show off the project once it's live in a few weeks. Thanks for the best JS library in the world.

Yay! Glad you figured it out. Sounds like you had a very productive day in terms of learning. Good job! 🎉

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