Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
CindyDB

Unpin section after scrollTrigger

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 post
Share on other sites

Hey Cindy. I am not understanding what you're wanting to happen. Could you please try to re-explain what you're trying to accomplish? Perhaps there's a site that has the effect that you could show or a diagram.

 

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

Link to post
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 ExyJeMp by akapowl (@akapowl) on CodePen

 

 

Was this what you were talking about?

 

 

38 minutes ago, 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 post
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 post
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 post
Share on other sites

 

Sorry, I can't quite follow, could you try re-phrasing your question?

Do you mean instead of the fading in of the mask a 'moving in' from the bottom, like as if  you were scrolling?

Link to post
Share on other sites
56 minutes ago, CindyDB said:

Hope that clarifies?

 

 

Not 100%, to be honest.

Maybe something like this?

 

See the Pen NWrmoBX 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 post
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 MWeRxqY 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 post
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 post
Share on other sites
26 minutes ago, 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:

 

52 minutes ago, 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 QWEPRpq 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 post
Share on other sites

Ah shucks, sorry! I missed that. Thanks again for all your amazing assistance. 

  • Like 1
Link to post
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.

×