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:
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):
----------------------------------------------------
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.