GSAP Timeline Fade-Out section transition

[Jgoo321]

Hi Team,

 

I have linked the CodePen from @GreenSock. My code has a similar basis of this idea, one of the main differences is the background for all of my sections are white. I am looking for guidance on creating a fade-out transition. When I scroll to the next section, the previous section should looking as if it is fading into the darkness and the current section is taking over.

 

A similar idea of what I am looking for would be here: https://vaynerx.com/#VaynerX (imagine this with white backgrounds). Any help on this would be much appreciated. I have been trying to adjust the opacity on the timeline transition, but just can't quite get it.

 

Thanks,

Johnny G.

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

[mvaneijgen]

Hi @Jgoo321 can you share what you've already tried (multiple minimal demo's is also fine)? With an explanation of what you think does not feel right, that's a much easier starting point to start modifying. Also the same when using ScrollTrigger, just remove the Observer plugin for now, just focus on the animation and if that is correct it will be trivial to hook it up to some other plugin.

[Jgoo321]

Hey @mvaneijgen, thanks for your reply. After doing some further research I actually found a CodePen similar to what I am trying to create...

 

See the Pen dyqVrJL by Andy199807 (@Andy199807) on CodePen

 , from the thread 

 

(1) So that CodePen is doing pretty much what I want, but I would like the sections to not shrink, instead have their same size with the same effect.  Here is a good example of that: https://vaynerx.com/#VaynerX. 

 

(2) I found that CodePen as I was researching another issue I was facing which is, on a trackpad, if I quickly swipe twice it calls the goToSection function twice. So for example, if I am on section1 -> swipe twice -> goes to section2 then immediately to section3 (). I am looking to change that so if the user swipes many times, while the section is transitioning, it only goes to the next and/or previous section.

 

 

Thanks,

Johnny Gangoo

 

[Cassie]

Hi there!

 

Quote

(1) So that CodePen is doing pretty much what I want, but I would like the sections to not shrink, instead have their same size with the same effect.  Here is a good example of that: https://vaynerx.com/#VaynerX.

 

As @mvaneijgen hinted at, this forum is focused on helping people who have GSAP bugs or confusion about the API, we don't have the resources to build out custom animations for people. We're happy to nudge you in the right direction if you can show us what you've attempted, or explain the code if you're confused about any part of it.

 

This sounds like buggy behaviour - thanks for flagging. I can't replicate on my trackpad, could you give any more details about OS/Browser/etc?

Quote

(2) I found that CodePen as I was researching another issue I was facing which is, on a trackpad, if I quickly swipe twice it calls the goToSection function twice. So for example, if I am on section1 -> swipe twice -> goes to section2 then immediately to section3

 

[GreenSock]

6 hours ago, Cassie said:

This sounds like buggy behaviour - thanks for flagging. I can't replicate on my trackpad, could you give any more details about OS/Browser/etc?

Quote

(2) I found that CodePen as I was researching another issue I was facing which is, on a trackpad, if I quickly swipe twice it calls the goToSection function twice. So for example, if I am on section1 -> swipe twice -> goes to section2 then immediately to section3

 

I'm not so sure it's buggy behavior - some systems continue to dispatch touch/wheel events based on momentum. So if you swipe really fast or flick your mouse wheel, for example, your system may keep dispatching those events for a while until it slows to a stop. It's totally unrelated to GSAP/Observer. If you swipe hard and the animation finishes before the system stops dispatching those events, then the next event will trigger going to the next section (as it should). To work around that, you'd need to set up some conditions in your code to ignore those events for a certain amount of time maybe.