Jump to content
Search Community

ScrollTrigger change end after body tag received a certain class (via onLeave)

Catalin R. test
Moderator Tag

Recommended Posts

Hi,

Into a complex project I need for the first section an effect made with ScrollTrigger plugin.

I can't use once method (once: "true") because it's difficult to avoid a jump.

I've put a class on body tag using onLeave method and when I have this class I want to change end to be: end: "top top".

Is that possible? I want to have this effect (scrub and pin) only once.

Thanks!

See the Pen NWLwgLR?editors=0010 by ZenTao (@ZenTao) on CodePen

Link to comment
Share on other sites

Hi there Catalin - 

 

Quote

I can't use once method (once: "true") because it's difficult to avoid a jump.

 

This doesn't sound right to me. You shouldn't be experiencing jumps with once: true

Could you possibly provide a working demo showing the jump, the issue could be with CSS, HTML or an external library. It's very difficult (often impossible) to debug with just GSAP code.

Link to comment
Share on other sites

Hi Cassie,

See the Pen VwGrQLp?editors=0010 by ZenTao (@ZenTao) on CodePen

https://www.v7.esthetic.stempora.me/

It's impossible to replicate the entire project into a pen. There're a lot of JavaScript code integrated.

You will see that if I use once: true, a gap appears upon the first section.

I've tried to fix it with css and JavaScript but doesn't work properly.

Thanks!

Link to comment
Share on other sites

Sorry, but we can't debug without a minimal demonstration of the issue. I've worked on many 'complex' projects and run into a lot of horrible tangly bugs and the thing that helped every single time was stripping it back to the basics.

 

See if you can recreate the issue with as little CSS/JS as possible. If not, incrementally add in your code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

Link to comment
Share on other sites

Quote

It's impossible to replicate the entire project into a pen. There're a lot of JavaScript code integrated.

That's ok! The whole project won't be any help anyway. We just need to see the particular animation you're struggling with

Link to comment
Share on other sites

Hi Cassie,

It's not about debugging!

You have nothing to debug!

I've asked about if exists a way to change the value of end property from "bottom top" to "top top", using  a class (.no-effect) put it on body tag with onLeave callback function!

When I have class no-effect on body I need the value of property end to be  "top top".

That's all!

Thanks!

Link to comment
Share on other sites

1 hour ago, Catalin R. said:

You have nothing to debug!

You mentioned a "jump" occurring (which you wanted to avoid), so that sounded like debugging. And it's a little unclear (at least to me) if you're trying to change the "end" value on the ScrollTrigger only after it already reached its end (maybe you're applying the .no-effect class from within the onLeave of the very same ScrollTrigger?) or if you're saying you want to create the ScrollTrigger initially with the end value conditionally dependent on whether or not .no-effect is on the <body>. That's why is incredibly helpful when you can provide a minimal demo that illustrates the problem you're trying to solve. 

 

4 hours ago, Catalin R. said:

I want to have this effect (scrub and pin) only once.

In order to do pinning (and not have things overlap), pinSpacing is added in order to push the elements below the pinned element further down to compensate for the pinning distance. So let's say you pin the element for 500px. That means the pin-spacer adds a padding-bottom of 500px (pushing things down). If you get to the end of that ScrollTrigger and then kill() it (which is basically what once: true does), then of course that pinSpacing gets removed (as it should). Removing that 500px of pinSpacing would obviously shift things up. That's why Cassie is doing that work in the onLeave to adjust the scroll position to compensate for that shift.

 

1 hour ago, Catalin R. said:

I've asked about if exists a way to change the value of end property from "bottom top" to "top top", using  a class (.no-effect) put it on body tag with onLeave callback function!

Can you help us understand the "why" behind your request? It's confusing for me because it sounds like you're asking how to change the end value of a ScrollTrigger that has already finished and you want to kill (so why alter the end value of a ScrollTrigger that's no longer in effect?). I glanced at your code and it sure looks like that's what you're attempting but I'm trying to understand your ultimate goal because that approach doesn't make logical sense in my head (but I'm sure it will once you explain your ultimate goal). 

 

When you provide a minimal demo that clearly illustrates the issue, it saves everyone a lot of time, back-and-forth, etc. because we can see things in context and can very quickly diagnose problems and offer solutions, often by just forking your demo and applying the fix and posting it here. 

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