Jump to content

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


  • Posts

  • Joined

  • Last visited

Everything posted by Ak89

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