bdrtsky Posted June 3, 2020 Posted June 3, 2020 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.
ZachSaucier Posted June 4, 2020 Posted June 4, 2020 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! 1
bdrtsky Posted June 4, 2020 Author Posted June 4, 2020 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.
bdrtsky Posted June 4, 2020 Author Posted June 4, 2020 Let me explain more how this effect is done: We put all headers (that have same height) in fixed element, that have same height and overflow hidden. Headers are absolute positioned. Each header listens some section 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 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 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...
mikel Posted June 4, 2020 Posted June 4, 2020 Hey @bdrtsky, It could go like this See the Pen OJMPJKM by mikeK (@mikeK) on CodePen. Happy scrolling ... Mikel 4
bdrtsky Posted June 4, 2020 Author Posted June 4, 2020 @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.
ZachSaucier Posted June 4, 2020 Posted June 4, 2020 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?
bdrtsky Posted June 4, 2020 Author Posted June 4, 2020 The initial codepen is working (I don't know why links here are broken) - See the Pen gOPOqJQ by dhatt (@dhatt) on CodePen. So I need to pin after FROM part, then trigger TO part after pin.
ZachSaucier Posted June 4, 2020 Posted June 4, 2020 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.
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now