Jump to content
Search Community

Unpin section after scrollTrigger

CindyDB test
Moderator Tag

Recommended Posts

I'm using ScrollTrigger to add a mask on a page, show some text and then I'll fade in the text coming up below as well. 

 

My problem is that because the section is pinned the masked section now wipes up off the screen rather than the background staying static and the masked text (NATURAL) moving up and off the page.

 

In my own example I keep seeing the NATURAL part after scrolling but I can't seem to get that to work in the codepen version. 

 

Please help!

See the Pen RwROJPN by themetailor (@themetailor) on CodePen

Link to comment
Share on other sites

Hey @CindyDB

 

I fiddled around a bit, and it seems, that the background-attachment: fixed; on your .pagefill was causing the issues with the disappearing on unpin (if I got you correctly on that). Removing that background-attachment seems to resolve the issue.

 

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

 

 

Was this what you were talking about?

 

 

On 11/18/2020 at 3:05 PM, ZachSaucier said:

Side note: We recommend using the position parameter for tweens in timelines instead of using delay.

 

That could maybe look something like this

 

tl
  .addLabel("dia")
  .to(".pagedisolve", { autoAlpha: 0 }, 1)
  .to(".pagefill", { autoAlpha: 1 }, 2)
  .to(".pagetext", { autoAlpha: 1 }, 3)
;

 

 

Also, the toggleActions on your ScrollTrigger actually is needless, since you are using a scrub.

 

Hope this helps.

 

Cheers,

Paul

 

  • Like 4
Link to comment
Share on other sites

2 minutes ago, akapowl said:

That could maybe look something like this

 


tl
  .addLabel("dia")
  .to(".pagedisolve", { autoAlpha: 0 }, 1)
  .to(".pagefill", { autoAlpha: 1 }, 2)
  .to(".pagetext", { autoAlpha: 1 }, 3)
;

Or to keep things relative:
 

tl
  .addLabel("dia")
  .to(".pagedisolve", { autoAlpha: 0 })
  .to(".pagefill", { autoAlpha: 1 }, "+=0.5")
  .to(".pagetext", { autoAlpha: 1 }, "+=0.5")

 

  • Like 2
Link to comment
Share on other sites

1 hour ago, akapowl said:

Hey @CindyDB

 

I fiddled around a bit, and it seems, that the background-attachment: fixed; on your .pagefill was causing the issues with the disappearing on unpin (if I got you correctly on that). Removing that background-attachment seems to resolve the issue.

 

 

 

 

 

Was this what you were talking about?

 

 

 

That could maybe look something like this

 


tl
  .addLabel("dia")
  .to(".pagedisolve", { autoAlpha: 0 }, 1)
  .to(".pagefill", { autoAlpha: 1 }, 2)
  .to(".pagetext", { autoAlpha: 1 }, 3)
;

 

 

Also, the toggleActions on your ScrollTrigger actually is needless, since you are using a scrub.

 

Hope this helps.

 

Cheers,

Paul

 

Hi Paul

 

That's awesome! So now, my next question is this: Is it possible to keep the background static and have mask just move over it? 

Link to comment
Share on other sites

On 11/18/2020 at 6:00 PM, CindyDB said:

Hope that clarifies?

 

 

Not 100%, to be honest.

Maybe something like this?

 

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

 

 

Some notes on that:

I re-set the background-attachment: fixed; to your .pagefill and instead in the HTML took your .pagefill out of the #pagehead that is being pinned (so it doesn't pin with the rest and the background-attachment that is neccessary for that effect can stay on it without things breaking on unpin when it is contained within).

 

I also removed the tween on the .pagefill's autoAlpha from your timeline, because in this case it won't be neccessary anymore, and then I played around a bit with the durations and positions of the other two tweens in that timeline until I found a nice balance in this:

 

tl
  .addLabel("dia")
  .to(".pagedisolve", { duration: 9, autoAlpha: 0 }, 1)
  .to(".pagetext", { duration: 1, autoAlpha: 1 }, 9)
;

 

Oh, and I also changed the end of the ScrollTrigger to '+=100%' with regards to this.

 

All in all it looks quite what I think, you want to achieve - did I get you right on that?

 

If not, just try playing around with the values and positioning yourself - or please try to rephrase again (maybe with exact steps of what you want to happen).

 

I'll be happy to help if I understand what it is you want to achieve.

 

Cheers,

Paul

 

 

  • Like 2
Link to comment
Share on other sites

 

And here is a combination of those 2 (the actual behaviour of the initial demo and the setup of the second), that seems to work.

I can not actually explain to you why this works (actually I am a bit baffled too) because I totally got to this by trial and error.

 

What I can tell you though, is that I added an extra ScrollTrigger that pins the .pagefill (which is now outside of the #pagehead) and onEnter and onLeave do a bit of trickery by setting its yPercent (because otherwise it would have disappeared again). Additionaly I had to do some trickery to the .content, too and pull it up a bit via css, so there is no huge gap, where the .pagefill was supposed to be before.

 

That mentioned ScrollTrigger looks like this 

 

ScrollTrigger.create({  
    trigger: "#pagehead",
    start: "top top",
    end: "+=100%",
    pin: '.pagefill',
    scrub: 1,
    markers: true,
    onLeave: () => {
        gsap.set('.pagefill', { yPercent: -100 })
    },
    onEnterBack: () => {
        gsap.set('.pagefill', { yPercent: 0 })
    }
})

 

 

 

...and makes things behave like that now:

 

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

 

 

 

Again; this was totally trial and error and I wish I could explain what's happening more thoroughly, but I am a bit out of focus by now, and can't quite wrap my head around it myself.

 

Hope those examples at least inspire you on how to fiddle with things to get where you actually want to get with this.

 

Cheers,

Paul

 

  • Like 1
Link to comment
Share on other sites

This is seriously amazing, thanks for taking the time. I think I understand more than I did already!

 

I have one more question - how to I reduce the space between the 2 triggered sections. You'll see there's a full blue screen while you scroll down, I'd like to reduce that gap?

 

See the Pen eYzoooy by themetailor (@themetailor) on CodePen

 

Thanks!

Link to comment
Share on other sites

On 11/18/2020 at 8:18 PM, CindyDB said:

I have one more question - how to I reduce the space between the 2 triggered sections. You'll see there's a full blue screen while you scroll down, I'd like to reduce that gap?

 

The answer would be this:

 

On 11/18/2020 at 7:52 PM, akapowl said:

Additionaly I had to do some trickery to the .content, too and pull it up a bit via css, so there is no huge gap, where the .pagefill was supposed to be before.

 

See in my pen above, how I added margin-top: calc(150px - 100vh); to the .content - since you are now using a container with a different class-set for your content, you could apply that 'fix' to that container instead. Probably to .mpcontent.content-nomarg because it has the highest priority as you set things up - something like margin-top: calc(0px - 100vh); should do the trick - and it really is some sort of hacky trick/workaround. 

 

See the Pen 153fc9049a430c51d36d7ae0e6d93b1d by akapowl (@akapowl) on CodePen

 

 

Alternatively you could also try transform translating it upwards on the y axis. Whatever works best in your general setup.

 

 

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