Jump to content
GreenSock

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

Ak89

Members
  • Posts

    9
  • Joined

  • Last visited

Ak89's Achievements

3

Reputation

  1. Thank you very much.
  2. 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?
  3. 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.
  4. 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!
  5. 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?
  6. 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!
  7. 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!
  8. 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?
  9. 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!
×