[Is there any way to solve the scrub jumping phenomenon?]

I inevitably attach it as a video and photo. The images are scrub:3 and scrub:true, respectively. The camera position of threejs moves, so it has no choice but to overlap, and I want to solve this problem.

 

 

 

[Is there any way to solve the scrub jumping phenomenon?]

See the Pen vYaPjjd by kku98057 (@kku98057) on CodePen

Thank you for your reply.
My purpose is to create a viewpoint transformation in THREEJS when the z-value of the camera reaches the appropriate position along the scroll.

Therefore, entering a high scrub value overlaps the position value of the camera. I was a little confused because I took it as a very simple example!

The longer and more complex the section, the more the animation overlaps. One trigger, many different things.

If you create a timeline for one trigger, the animation does not overlap, but you cannot properly locate it. I've been looking for a solution to this, but I can't get it right.

[Is there any way to solve the scrub jumping phenomenon?]

If you move on to the next section before rubbing, there is a phenomenon where the animation overlaps and you can't jump or reach the end, is there any way to solve this?

Assigning a low scrub does not cause this problem, but you may need to assign a high value.

 

I tried immediateRender, preventOverlaps, and fastScrollEnd, but the desired result was not found.

It's a very simple example, but the more complex the animation is, the more noticeable it is.

See the Pen zYLyyKN by kku98057 (@kku98057) on CodePen

[After scrubbing, I want to do pin]

@GreenSock

oh ! In this way.I'm good! I am most grateful.

 

[After scrubbing, I want to do pin]

hi. 

Thank you for always helping me

 

As soon as scrubbing is finished, I want pin to be connected, but it doesn't work well
Help me.

See the Pen KKZxqjX by kku98057 (@kku98057) on CodePen

[Can I add a pin function in the middle?]

Thank you For starters, always so much for your help too.

 

Just watch the mobile version.
Text animation will not start until the pin function is started.

But what I want is that the text in the first purple background is animated while scrolling down and then the pin is executed.

What should I do?

 

reference site

 

https://www.apple.com/kr/iphone-13/

It is located at the bottom of the site.

See the Pen zYpoKYN#unsupported-modal by kku98057 (@kku98057) on CodePen

[The pin causes an error... overlap error]

1 hour ago, OSUblake said:

White background margins are created...

 

[The pin causes an error... overlap error]

It's very simple coding, but why is it like this?
except what is currently written

If you use multiple pins during actual operation, you can't get the height value properly only in certain areas, and it can overlap with other sections, but it's not solved.T^T 

I'd really appreciate your help.

See the Pen YzYGxaM by kku98057 (@kku98057) on CodePen

[matchMedia is is weird.]

Thank you!

It was solved without a problem.

[matchMedia is is weird.]

The y-position value of the text does not return.

It's hard to solve it by myself.

I'd appreciate it if you could help me T^T

See the Pen eYeaJox by kku98057 (@kku98057) on CodePen

[how make animation responsive ?]

@mvaneijgen

oh!! 

I solved it perfectly. Thank you very mach

[how make animation responsive ?]

i want

In the PC version, no have pin

and In the Mob version, hove pin 

 

However, the animation overlaps or does not work.

How can I separate the two animations, the PC version and the mob version?

See the Pen WNXWNJo by kku98057 (@kku98057) on CodePen

[Sometimes not working]

Hi, i'm New developer.

 

First of all, I am not good at English, but I ask for your understanding.

 

I interacted with the published page.

but Sometimes it doesn't work.

Strangely, only a part of it doesn't work.

It sometimes works when you press refresh several times.

I don't know why.   (T^T)

 

i used this plugin

ajax

bootstrap

gsap(scrolltrigger)

swiper

jquery