Ak89

oh.. I see. Thank you.

Hi, I just forked the ScrollTrigger with locomotive scroll codepen example and made some small changes to the javascript code. Basically, I put the code in a class and instead of defining a const locoScroll, I used the this keyword and this.locoScroll. With the class definition and original const declaration, everything works fine, but the code breaks when I use this.locoScroll instead. I realize this might not be related to ScrollTrigger, but since the error is happening inside the ScrollTrigger.scrollerProxy callback, I'd thought I could ask here. Thanks for any help in advance.

Right... but the whole point of onComplete: enableScrollTimeline in my timeline is to postpone other triggers until the current timeline is complete. I was able to fix the problem. I set the display of the sections to none and then set it to block inside the enableScrollTimeline function. Thanks for the tip anyways. I'll keep that in mind.

Hi again. One more thing. I have all the scrollTrigger stuff inside the enableScrollTimeline function which is supposed to trigger after the first animation is completed, but if you start scrolling quickly when the page loads, the scrolling works while the animation is playing and it messes the whole thing up. How do I disable the scroll at the beginning until the initial animation is over?

Oh I see. Thank you! Problem solved.

Hello. I am trying to add a parallax image sequence to a pinned animation with ScrollTrigger. The Parallax section work fine as standalone code (this is a code I grabbed from another post on this forum). However, when I add it to the end of my animation, the parallax effect doesn't work. I suspect the positioning of the background images is the reason, but can't figure out what the solution is. Could you please take a look and advise? Thanks, Akbar

Hi there, I am combining a scrolltrigger to play a video plus another one on the same page to run through a three js animation sequence s shown in my code below. I have two questions: 1- After reviewing other posts on this forum, I have increased the video fps for a smoother transition and borrowed the code from the demo mentioned in here to play the video. Looking at my code, is there anything that you can suggest to improve performance for either the video play or the three js scroll? The reason I ask is because the video sometimes doesn't play on scroll and so, I wonder if there are any performance problems in my code? 2- I have tried multiple things to play the video only if I scroll on its containing div using some tips from posts like this, but wasn't able to achieve that. What I want is basically to only play the video when I scroll on the little div on the bottom right corner and scroll through the three js animation when I scroll anywhere else on the page. Any suggestions? Thanks for your help in advance. -Akbar

Thank you very much.

Hi Jack. Thanks for the response. With the help of your example and the example below, I was able to get very close to what I want. https://codepen.io/mikeK/pen/dyMrZzG Below is a CodePen link to my code at this point. The problem is that after the horizontal scrolling in the pinned section, I can't scroll further to the last section. I have played with the end value inside the timeline and it is not giving me the result I expect. https://codepen.io/Akbarbakhshi/pen/eYWevvL I read through the ScrollTrigger documentation as well, but couldn't figure the problem. Can you please take a look and let me know what I am missing?

Hi. I am using a custom scroll (no 3rd party library) as you see in the CodePen example. I am trying to integrate gsap's Scrolltrigger to basically make the first two images scroll vertically and the last two scroll horizontally. I have read some questions like this and I think I need to use ScrollerProxy and then do the scrollTrigger timeline. But haven't been able to do that. I have to use my custom scroll because I plan to do some image distortion, etc. using Three JS shaders and so on. Can I achieve what I am trying to do (scroll vertically and then horizontally) with my custom scroll plus ScrollTrigger? If so, could you please give me some guidance? Thanks.

HiVisual-Q. Thanks for the response. I see what you're saying. Interesting! I am very new to all this magic and so I might be confusing different things together. The examples that you shared also really helped. Thanks!

I have two sections in a webpage as you see in the CodePen below. A section inside a wrap class and a section to show some parallax effect (borrowed from a Pen that you guys did). The animation effect and linkage between the two sections do not look ideal to me. I'd like to achieve an animation like this (especially for the transition between the two sections) It seems like the scroll sequence in that example includes some pinning (???). Is there a way I can achieve that kind of effect for my webpage using gsap? or am I not doing an apple-to-apple comparison?

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!

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!

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?