Jump to content
Search Community

When i'm restarting the timeline it distorted his values

Lucky Fox Design test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

I have a single load for all animations where i assign this animations to the variable.
 

var animations = {
  all: [{ anim: returnADAnimation() }, { anim: returnCLAnimation() }]
}


All svg files for different animations hosted in one page, but i see only one svg file with his animation. All others located outside window viewport.
To see other animations and its svg i have created a carousel.

  • When i switch to next svg, i pause the current animation for current svg and play next animation.
  • When i return to the previous, i pause current animation and restart previous. So in this step i have a big problem.

 

First animation play:

436621152_Apr-24-20192-56-14AM.gif.dc1dd14f4f59dc134853b69c04d54ef8.gif

 

When i restart it i have different play behavior, (all the wheels jumps at the wrong time, and jumps more sharper than in the first play):

1625159349_Apr-24-20192-56-30AM.gif.39cc1796a5d1e557503cf985061d09d6.gif

 

----------------------------------------------------

 

Pause and restart:

 

      animations.all.map(el => {
        if (el.anim.animationId === menuItemId) {
          let anim = el.anim.animationTl
          anim.pause(0)
        }
      })
      animations.all.map(el => {
        if (el.anim.animationId === id) el.anim.animationTl.restart()
      })



I have a different timelines for all wheels and one main timeline for all of them.
Second wheel
 

  let wheel2Tl = new TimelineMax()
    .set('#wheel2', { y: 0 }, 0)
    .to('#wheel2', 0.4, { y: -6 }, 0.5)
    .to('#wheel2', 0.1, { y: 0 }, 0.7)
    .to('#wheel2', 0.4, { y: -6 }, 1.4)
    .to('#wheel2', 0.1, { y: 0 }, 1.6)


Main timeline:

 

  let mainDroidTl = new TimelineMax()
  	...
    .add(wheel3Tl, 0)
    .add(wheel2Tl, 0)
    .add(wheel1Tl, 0)
    .add(wheelsTl, 0)
	...

 

And i return in function this main timeline.

 

----------------------------------------------------

I don't know how to fix wheels timeline problem. I tried everything and I don't know what else I can do.

Link to comment
Share on other sites

It's very difficult to troubleshoot blind, but it sure sounds like you've got an overwriting problem. You're probably creating tweens that overlap and fight each other for controlling the same property of the same object at the same time. By default, that kills the overlapping piece of that tween. You could set overwrite:false in any of your tweens, or event TweenLite.defaultOverwrite = false, but be very careful about that because it's generally a bad idea to create competing tweens like that to begin with. 

 

Actually, even the code snippet you provided shows that you've got competing tweens. For example: 

 

.to('#wheel2', 0.4, { y: -6 }, 0.5)
.to('#wheel2', 0.1, { y: 0 }, 0.7) //<- this starts halfway through the previous tween!

 

Notice the duration of that first tween is 0.4 seconds, but it's positioned at an absolute time of 0.5 in the timeline. Then, you position ANOTHER tween of the same property of the same object at 0.7 seconds into the timeline...which is overlapping the other tween by 0.2 seconds. That will cause the 2nd tween to overwrite (kill) the previous one. 

 

If you still need help, please provide a reduced test case in a codepen so we can see what's going on and we'd be happy to help. 

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

Quote

sounds like you've got an overwriting problem

 

It really was a problem with overwriting between tweens.
I resolved this problem with delay parameter and timings for a timeline and for a tween and with deleted overlap position parameter. Next time I'll think before using this parameter. Thanks a lot for your help.

  • Like 1
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...