Thanks for spending your time on this.
I just realized, that I need to nest the variable updates I am doing inside the animation functions using them.
My main problem ist to keep the animation progress and update from its last state when running the animation function again. I guess I would have to create a main timeline?
Here is my modified code:
updateProgressToGo() {
this.steps.forEach((step) => {
if (step.to.name === this.$route.name) {
console.log('step.progress: ', step.progress)
this.progressToGo = step.progress
}
})
},
tlStart() {
const tl = new TimelineMax({ paused: true })
tl.to(this.$refs.progressFlag, 1, { autoAlpha: 1 })
return tl
},
tlMove() {
const duration = this.$refs.path.getTotalLength() / this.speed
const motionPath = MorphSVGPlugin.pathDataToBezier(this.$refs.path, { align: this.$refs.progressFlag})
const tl = new TimelineMax({ paused: true })
tl.to(this.$refs.progressFlag, duration, { bezier: {values: motionPath, type:"cubic", autoRotate:true}})
return tl
},
tlEnd() {
const tl = new TimelineMax({ paused: true })
tl
.to(this.$refs.riding, .2, { morphSVG: this.$refs.anticipateFwd, shapeIndex: 0 }, '+=' + Math.abs(this.tlMove().duration() - 0.5))
.to(this.$refs.riding, .2, { morphSVG: this.$refs.anticipateBack, shapeIndex: 0 })
.to(this.$refs.riding, .2, { morphSVG: this.$refs.stoppedStandUp, shapeIndex: 0 })
.to(this.$refs.riding, .3, { morphSVG: this.$refs.walkBackFootFwd, shapeIndex: 0 })
return tl
},
tlMoveWrap() {
const tl = TweenMax.to(this.tlMove(), this.tlMove().duration(), {
progress: this.progressToGo,
ease: Back.easeOut.config(1.3), x: -5
})
return tl
},
This is how I call the animations on mounted()
this.updateProgressToGo()
this.tlStart().play()
this.tlMoveWrap()
this.tlEnd().play()
and this on watch()
this.updateProgressToGo()
this.tlMoveWrap()
this.tlEnd().play()
What happens here is that the animation restarts at progress:0 instead of its last position. What did I miss?
This is what I am trying the progress to behave like:
https://codepen.io/kerpui/pen/BgXoOK