Jump to content
GreenSock

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

ScrollTrigger in a previously hidden div

Go to solution Solved by akapowl,

Recommended Posts

Hi. I am new to gsap and I started using it with Three JS just recently. Specifically, I have been using ScrollTrigger on a screen with hidden div inside a sidebar as shown in the attached codepen. The problem is that when the sidebar opens up and I start scrolling, the scrolltrigger code at the bottom of the JS file does not work. However, when I resize the screen, it does work. Please see the vide below where the scrolltrigger starts to work after I open the devtools (resizing happens).

 

https://drive.google.com/file/d/1RFKp_uEMkqWKLL9JC6yaf2dgolToeCOp/view?usp=sharing

 

Any thoughts why this is happening? Thanks for your help in advance!

See the Pen YzZdjWq?editors=0011 by Akbarbakhshi (@Akbarbakhshi) on CodePen

Link to comment
Share on other sites

I haven't had time to look through all your code, but based on your description it sounds like you must have things loading in after the page fires its "load" event, and those things affect layout (messing with start/end positions). In that case, just make sure you call ScrollTrigger.refresh() AFTER you're done loading and doing anything that affects layout. 

 

Does that resolve things for you? 

Link to comment
Share on other sites

Thanks for your response. I tried adding ScrollTrigger.refresh() in different locations in the JS file. I also tried adding it using the code below. But none of them solved the problem.


window.addEventListener("DOMContentLoaded", function () {
    ScrollTrigger.refresh()
    console.log("It's loaded!")
})

There was only one place where I added ScrollTrigger.refresh()  and it solved the problem. Inside the animate() function. However, I don't think that's a proper place to refresh the ScrollTrigger since animate() function is constantly called over and over again. Any advice?

Link to comment
Share on other sites

1 hour ago, Ak89 said:

However, I don't think that's a proper place to refresh the ScrollTrigger since animate() function is constantly called over and over again. Any advice?

 

Definitely not the best place to put that. It should probably be somewhere when your nav opens and the scroll bar appears.

  • Like 3
Link to comment
Share on other sites

Yep, Blake is right. You need to figure out what in your code is triggering the layout changes and then call ScrollTrigger.refresh() after that. My guess is it's something like this:

loader.load('models/RobotExpressive.glb', ...

In other words, after that finishes loading and doing whatever it does after that, THEN call ScrollTrigger.refresh(). 

 

And there's no need to call it on DOMContentLoaded because ScrollTrigger automatically does that already. 

  • Like 1
Link to comment
Share on other sites

  • Solution

 

4 hours ago, OSUblake said:

Definitely not the best place to put that. It should probably be somewhere when your nav opens and the scroll bar appears.

 

Yep, I just put it in an onComplete of that first tween when opening the menu (the one that sets your .menu to display: flex) and it works.

 

I added a simple box as a model here - and also changed the reference to the model instead of 'sketch' in the ScrollTrigger's onUpdate (as there actually isn't any sketch variable in your code).

 

See the Pen 380c988e68d072376c28a132531d2f8e by akapowl (@akapowl) on CodePen

  • Like 4
Link to comment
Share on other sites

Thank you all. I originally just simply put the refresh code inside the Click event and that didn't work. The key was to put it in the OnComplete of the first tween as akapowl suggested. 
On a separate note, in this same example on CodePen, do you know why the first time I open the sidebar, it acts different than any time after? The sidebar is supposed to open a blue screen first and then the white screen, but first time after load it does it differently. 

Please let me know if you prefer me to ask this second question in a separate post. Thanks!

Link to comment
Share on other sites

3 hours ago, Ak89 said:

On a separate note, in this same example on CodePen, do you know why the first time I open the sidebar, it acts different than any time after? The sidebar is supposed to open a blue screen first and then the white screen, but first time after load it does it differently. 

 

I'm not entirely sure, since there is a whole lot going in with that regard - so it might be better to create a seperate thread for that.

 

Here are some notes though:

  • Usually when you have many tweens that need some sort of chaining in sequence, it's best to use timelines for that
  • Usually it's also best to create your animations/timelines upfront and store them in a variable so you can easily just toggle their playstate later
  • You can not simply just tween on the 'display' property since it is not animatable
  • Tweening properties like margin-left is not really recommended since it can be very unperformant - better try setting things up so you can tween on transform properties (like x or even better xPercent here for example - which will save you some headaches when it comes to resizing)

 

Here is a quick and dirty demo for your menu with all of the aforementioned combined.

Not saying it is ideal or even exactly the way you wanted it - but it works a lot better. 

 

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

 

  • Like 5
Link to comment
Share on other sites

akapowl , thanks for the tips and your help with both questions. What you did for my second question fulfills the purpose of what I am trying to do. Thanks again!

  • Like 1
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.
×