MorphSVG - How to reinstate an effect after it's use in a reusable function.

[bromel]

Good evening EveryOne

I have been scratching my head on this one and thought I would be better to share the problem.

 

So I have been playing around with morphSVG and been blowing my mind🤯 with its features.

 

I am created a master timeline that utilises two functions to create my animation.

 

On the very first instance you will see a circle come onto the scene followed by two lines being drawn onto after the circles appearance.

In the second instance i then fade away both the lines and circle.

The animation is then repeated another two times using different coloured circles.

 

Now the issue that I have is that MorphSVG only works correctly on the very first run of the animation, after that the effect no longer works on the other two cycles.

 

I have tried to call a 'clearProps' method at the completion of the animation but this does not work, I am a bit stuck, so any pointers will be appreciated.

 

regards

 

Bromel

See the Pen vYVPEam by w9914420 (@w9914420) on CodePen

[PointC]

Since the morph already happened on the first tween of the timeline, it appears nothing is morphing for tweens 2 & 3. Easiest solution is to use a .fromto() tween rather than a .to() tween.

 

See the Pen 6382a2db1d9550ba86e6e33f3f318b9a by PointC (@PointC) on CodePen

 

Happy tweening.

[bromel]

Hey @PointC 

 

This is FANTASTIC!!! many thanks

 

just a very quick request, I was also wanting to get the lines to drop down by 20 on the Y axis, this is what i originally written:

function clearData(object) {
  let tl = gsap.timeline();
//
  tl.to(object, { y: 90, duration: 1, autoAlpha: 0 })
    .fromTo(
      "#para-long-line",
    {y: "0"},
      {
        y: "20",
        duration: 0.8,
        ease: "power4.out",
        autoAlpha: 0
      },
      "start+=.1"
    )
    .fromTo(
      "#para-short-line",
    {y: "0"},
      {
        y: "20",
        duration: 0.8,
        ease: "power4.out",
        autoAlpha: 0
      },
      "start"
    );

  return tl;
}

Unfortunately it kept on moving the lines down on every cycle, was not quite sure on weather my method or maths was at fault, any further pointers would be great, many thanks again 

[PointC]

I'm not quite sure I follow. So the lines are supposed to only move on the first tween? Is that after the morph? If you can clarify the desired outcome a bit, I'll try to point you in the right direction. Thanks.  

[bromel]

Hi @PointC

 

Thank you for the quick reply, I have updated my original codepen, which now shows you the initial effect that I was trying to obtain, i thought best to separate my concerns without making it complicated. Has you can now see in the full version on the 'out' transition the 'para-lines' move down on the Y axis by 20. This works as expected on the first instance when the animation is ran, but after that it keeps on adding 20 units on each cycle.

 

 

I have tried using relative units and then clearing them on completion of each cycle, but this does not work

This is the first cycle, notice the transform matrix values

 

When I tried to clear the value it remained the same and just added another 20 units to the value.

 

I hope this clears things up and thanks again

 

Bromel

 

Edited May 25, 2023 by bromel
included example

[PointC]

Yep - the relative value on each iteration is the culprit here. There are a few ways to solve it, but I think the easiest is just to set the lines back to 0 after they fade out. Add this to the end of the timeline in the clearData() function and you'll be good to go. You also won't need relative y values on the tweens in that function with this change. Just y:20 will work perfectly.

 

tl.set("#para-long-line, #para-short-line", { y: 0});

Happy tweening.