sum.cumo GmbH

OSUblake... RESPECT for helping me to fix my code 'blind'. I am so happy to have such great support here at Greensock. Thanks a lot!

Thank you so much for helping me out! I will update my code with your advices and test it. Unfortunately I am not allowed to post the SVGs used for morphing etc. until my project is live. That is why I did not create a complete codepen yet. But if the problems I have still remain I will take my time and create some content I am allowed to publish. I will let you know if it worked out.

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

Hey there, I don't see any chance for me to solve this challenge alone, so here it is: - I want to do animate an element on a path - the path animation is split in progress steps (codepen: inputs ) - every time the chosen progress value is reached, the animated element has a morphing animation - when a new progress value is chosen, another morphing animation is played, then the progress proceeds and when the chosen progress value is reached, a morphing animation starts at the element I really hope this is not confusing. My original codebase is vue.js. I have another pen codepen where I pasted the code snipped I already wrote. This snipped is inside of the vue mounted() function. So it is fired only once and works. I need to call this animation on click too. And that's where my trouble begins. As soon as I nest my timelines in functions, this part here gets out of control: TweenMax.to(tlMove, tlMove.duration(), { progress: this.progressToGo, ease: Back.easeOut.config(1.3), x: -5 }) How can I turn this into a function without loosing the progress state? I really hope this is enough information and not too confusing. I have been trying to solve this with exportRoot too but failed. Thanks in advance Kerstin

Thanks a lot for the quick reply! Seems like I had a little bug in my code. Works like butter now

Hey there! Is there a possibility to not animate an element when it is set on display none by CSS? My current project is based on Vue.js. So I don't have that window object on mounted to detect the viewport size. So I thought it might be a nice workaround to let the animation start only if the target element is set on display block. Or is the only solution another Vue plugin to get the viewport width? Thanks in advance Kerstin

Thank you so much this really helped a lot! I updated my code and it works like a charm. The only thing I can't explain to myself is why doesn't the icon morph work at first click? Fun fact: the same code does work correctly integrated in my project. Have a nice day Kerstin

Dear community, here is my challenge: coding an accordion with an icon morphing first then expanding the content-area and finally increasing the contents opacity from 0 to 1 (see Codepen). At reverse I want the elements to animate in a different order than with tl.reverse(). My reverse order would be: morphing the icon first then decreasing the contents opacity to 0 and ending with the content area closed. The event I I'm listening to is 'click'. I hope my description is ok (not a native speaker) and that there is a solution to this. Thanks in advance! Kerstin