Jump to content
Search Community

Is there any way to solve the scrub jumping phenomenon?

kku98057 test
Moderator Tag

Recommended Posts

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

Link to comment
Share on other sites

I'm not completely sure what you're asking. But I think your problem is that you have one element that is controlled by two ScrollTriggers and they will fight for control if the first one is not yet done and the other one is starting, so you either have to make sure the other one is done when the next one starts or make it one big ScrollTrigger that just triggers over the whole duration (this seems like the easiest solution)

 

See the Pen GRBPbgr?editors=1010 by mvaneijgen (@mvaneijgen) on CodePen

 

You could also look in to the overwrite property https://greensock.com/docs/v3/GSAP/Tween/vars

 

If true, all tweens of the same targets will be killed immediately regardless of what properties they affect. If "auto", when the tween renders for the first time it hunt down any conflicts in active animations (animating the same properties of the same targets) and kill only those parts of the other tweens. Non-conflicting parts remain intact. If false, no overwriting strategies will be employed. Default: false.
  • Like 1
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

I read your question 5 times now and I'm totally lost. Sorry. I just don't understand what you're asking or what you're trying to do. I'd like to help. Your demo seems to be working exactly as expected. I must be missing something.

 

Here are some tips that will increase your chance of getting a solid answer:

  • A clear description of the expected result - "I am expecting the purple div to spin 360degrees"
  • A clear description of the issue -  "the purple div only spins 90deg"
  • A list of steps for someone else to recreate the issue - "Open the demo on mobile in IOS safari and scroll down to the grey container" 
  • A minimal demo that very clearly illustrates the problem.

 

Link to comment
Share on other sites

Hi,

 

I think one option could be to animate the camera position to a specific point using the onEnter and onEnterBack callbacks as shown in this particular post in order to prevent those jumps:

 

Another option could be to create a single timeline and use Prevent Overlaps:

https://greensock.com/3-8#preventOverlapsAndFastScrollEnd

https://greensock.com/docs/v3/Plugins/ScrollTrigger

 

Hopefully this helps.

Happy Tweening!

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...