[Animation problem when scrolling fast]

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!

 

See the Pen VwbXJam by tiffk935 (@tiffk935) on CodePen

[gsap.getById() only work once]

Thanks. 😀

[gsap.getById() only work once]

Hi,

 

Does gsap.getById() only work once?

After the first time, it returns undefined.

See the Pen ExmjRep by tiffk935 (@tiffk935) on CodePen

[ScrollTrigger `pinType: transform` makes the pinned element vibrate]

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!

 

 

See the Pen gOgeWGo by tiffk935 (@tiffk935) on CodePen

[Multiple pinned elements issue]

Hi @GreenSock

 

Still need help and i've asked in that new thread.

Thanks!

 

 

[Issue with pinned elements]

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()?).

 

See the Pen XWpppZg by tiffk935 (@tiffk935) on CodePen

 

[Issue with pinned elements]

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!

See the Pen VwPmwzg by tiffk935 (@tiffk935) on CodePen

[Multiple pinned elements issue]

 😢

[Multiple pinned elements issue]

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!

 

See the Pen MWJeRVd by tiffk935 (@tiffk935) on CodePen

[Problem with using multiple ScrollTrigger with same element.]

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!

See the Pen abpbrxN by tiffk935 (@tiffk935) on CodePen

[Start and end position of pinned elements are not refresh(recalculated) after other elements are appended.]

@ZachSaucier Thank you so much!!! 😄 

[Start and end position of pinned elements are not refresh(recalculated) after other elements are appended.]

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?

See the Pen abZKByX by tiffk935 (@tiffk935) on CodePen