Section Pro animate fade at marker

1

I’m sure I’ve achieved this many times in the past but it’s bugging me as I can’t remember.

See the very start of this homepage. How the background fades gradually from colour to white once once the header leaves the page.

https://www.justinmind.com

I can get close with a time fade but not a pixel space fade. Any ideas?

2

I’d use use Gravitate ScrollMate 2. Add a background to to it and drop it into your container stack and set it to float in parent. You’ll then need to adjust the various settings to have it animate when and how you want. I can mock up a demo if you need.

2 Likes
3

@habitualshaker Brilliant. Someone had to mention it.

Gravitate ScrollMate 2 has been the go to way to do this for about the last 3 to 4 years if I recall correctly.

4

Thanks, I’ll give it go in the morning.

5

ScrollMate2 uses its own JS that was written specifically for the job and is only 8kB for the whole page and multiple instances. Contrast this with using a do everything external library that is 8 times as big.

6

I’m going to have to ask for help Habitual - I can’t recreate it. I’m playing with the controls but I can’t get a fade.

7

Here you go. Depending on how much content you have in your section you may need to adjust the animation trigger points.

4 Likes
8

Thanks mate - I’ll crack on tomorrow morning. I just received the photos from a photoshoot we did a couple of weeks ago for this new company / website. Some crackers in there. Thanks again

9

So - I discovered why I was ballsing it up. I was putting my content in the SM2 stack. I didn’t realise it effected the area around the content without enclosing the content. Bravo Sir!

1 Like