KST

Hi, I want to make the same effect(horizontal scrolling and wave animation) like this site. The wave is big when scrolling fast. The wave is small when scrolling slowly. Now I'm faced with a problem of wave animation. If using gsap.set(), the animation looks not smooth. If using gsap.to(), the wave is not at the center of the viewport when scroll fast. Is there any advice on how to solve the problem? In addition, I also want to know is there any way(like stagger property) to make the code clean or improve performance. Thanks!

Thanks. ?

Hi, Does gsap.getById() only work once? After the first time, it returns undefined.

Hi, I use custom scroller and find that pinType: transform sometimes makes the pinned element vibrate. I have tried using pinType: fixed, but found that wheel scrolling event not firing when mouse is over the pinned element. I also tried using css pointer-events: none, but the button is not clickable. Is there anyway to solve this problem? Thanks!

Hi @GreenSock Still need help and i've asked in that new thread. Thanks!

Hi @akapowl Thanks for your reply. It's very helpful. ? But still have a problem. I've created a new pen. When resizing window, the position of .main is wrong (seems because of transform: translate()?). https://codepen.io/tiffk935/pen/XWpppZg

Hi, When resizing window between pin start and end position (before .yellow is shown in viewport), .yellow will jump to the top. Is there any way to solve the problem? Thanks!

?

Hi, I got two problems when using Scrolltrigger pin. 1. Pinned elements have same trigger and start but the position of the markers are not the same (.photo is not correct). 2. When resizing the browser, the position of .yellow is not correct. how to solve these problems? Thanks!

Hi, I want to make the same effect as this site. When scrolling page down and up fast, this will not work as expected (opacity is not correct). Is there anyway to improve this code? Thanks!

@ZachSaucier Thank you so much!!! ?

There are many pinned elements on my page, and some of them are appended from AJAX. After elements are appended from AJAX, the position of pinned elements, initialized after page loaded, are not recalculated. Is there a way to approach this?