Jump to content
Search Community

Possible to pin to bottom of trigger?

bdrtsky test
Moderator Tag

Recommended Posts

First of, congratulations with new release and new ScrollTrigger plugin! I started to play around with it, and I must say - I am impressed. So much, that decided to buy a GSAP licence this week 😀 Even if ScrollTrigger is free!

 

Now, I am trying to replicate such effect - midnight.js

This is basically just a bunch of fixed divs, that transitioning on Y axis when appropriate bottom/top of the section triggered.

 

As I understand I need somehow to pin fixed heading element after first part of animation is done, until the bottom of trigger is reached. I played with it couple of hours and couldn't work this out. Can someone point me how to acomplish this?

 

This is basic setup - 

 

 

 

See the Pen gOPOqJQ by dhatt (@dhatt) on CodePen

Link to comment
Share on other sites

1 hour ago, bdrtsky said:

I started to play around with it, and I must say - I am impressed. So much, that decided to buy a GSAP licence this week 😀 Even if ScrollTrigger is free!

Wow, thanks so much! We'd really appreciate that.

 

For the animation in, that's super simple. Our basic tween pen shows how to fire off animations when they enter the viewport.

 

The effect applied to "Midnight" in the center is a little more complicated. Notice that they have multiple "Midnight" elements, one per section. So on the section you'd want to hide the overflow and then absolutely position the "Midnight" half way up the viewport before the start of the element (top: -50vw) and make sure its offset is at the half way point (yPercent: -50). I'd use a ScrollTrigger to pin that when the container  starts to enter the viewport (start: "top bottom") and end when the container leaves the viewport (end: "bottom top"). Probably best to use a loop to apply all of these at the same time without duplicating code :) 

 

Happy to help more if necessary!

  • Like 1
Link to comment
Share on other sites

Thanks for helping, but this is not how this effect is done. 

 

 

As you can see they have all fixed headers in one container, and then track which section in viewport and transition translate according headers.

 

All I am asking: how to pin fixed header until bottom of trigger? I tried that already - it doesn't work.

Link to comment
Share on other sites

Let me explain more how this effect is done:

 

  1. We put all headers (that have same height) in fixed element, that have same height and overflow hidden. Headers are absolute positioned.
  2. Each header listens some section
  3. When section is scrolled up to header height (100px in my codepen) - enter effect should be triggered. So header should be transitioned on Y axis from bottom until section reach the top
  4. THEN IT SHOULD BE PINNED (this is where all issues are) until bottom of conteiner reach up to 100px of the top of the screen
  5. And when it does - then fixed pinned header should start second - leaving part of the effect. In meanwhile - the next header should entering. And this is how effect is done

Now the question how to do this with new GSAP API? This actually pretty trivial with vanilla JS. But I wrap my head around with ScrollTrigger...

Link to comment
Share on other sites

@mikel tahnk you for that great example? I solved it other way, but good to know alternatives!

 

So my initial mistake was that I was trying to find the way to pin between fromTo animation. Which is seems impossible, right?

I did it with 2 different functions.

Link to comment
Share on other sites

4 minutes ago, bdrtsky said:

my initial mistake was that I was trying to find the way to pin between fromTo animation. Which is seems impossible, right?

I did it with 2 different functions.

Sorry, I don't understand what you're asking. You can use .fromTo()s with ScrollTrigger. Can you try to rephrase your question? Or better yet can you show us a demo?

Link to comment
Share on other sites

I'm still not really understanding what you're trying to accomplish. Maybe you want to do one thing when the ScrollTrigger is reached and another thing after the end is passed? If so, you can use the onLeave callback to do something when the element goes out of the ScrollTrigger section.

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