Moving an SVG element to the background during an animation

[Adam959]

I am trying to move an SVG element into the foreground/ background during play and reverse.

 

I can get the element to move to the foreground at the start of the animation within the timeline, but I cannot get it to revert this change. I have tried using onReverseComplete on VSCode which works to an extent (some strange behaviour where it works randomly, but then will not work seemingly randomly), but on codepen onReverseComplete doesn't seem to work at all, despite using the same versions of GSAP.

 

Any clues or suggestions would be greatly appreciated. 

 

function openCloseContactInfo() {

    var contactAnimTlm = new TimelineMax({ paused: true, reversed: true });
    contactAnimTlm.to(Note, { y: -100, onComplete: bringForward })
        .to(CONTACTletters, { opacity: 0 }, 0)
        .to(ContactInfo, { opacity: 1, onReverseComplete: bringBackward }, 0.5)
        .to(Note, { scale: 3, transformOrigin: "50% 50%", y: 0 }, 0.5);

    $(MailBody).click(function () {
        contactAnimTlm.reversed() ? contactAnimTlm.play() : contactAnimTlm.reverse();
    });
}

 

Thanks,

 

Adam

See the Pen gOaMmzm by adam-cummings (@adam-cummings) on CodePen

[ZachSaucier]

Hey Adam and welcome to the GreenSock forums!

 

Reversing a timeline doesn't cause its child tweens to each reverse individually. So that's why your onReverseComplete isn't working. You can check that by putting a console.log() inside of the function.

 

If I had to do this, I might make a toggle function and use .call() instead: 

See the Pen yLYJodZ?editors=0010 by GreenSock (@GreenSock) on CodePen

[Adam959]

Thanks for the help Zach, the call function is definitely more suitable.

 

There is still an issue, which is that the .call() function is sometimes being called twice during the reverse timeline. This results in the SVG note returning to its original position, but having moved the element twice - it places the note above the letter base, rather than below. You can replicate this issue using your example.

 

I've been looking at this for several hours now but I cannot figure out what is happening. The click function is definitely only being called once so it really seems to be that either the timeline or call function is being called twice.

 

Any ideas?

 

Cheers

[ZachSaucier]

I wouldn't recommend affecting the DOM at all actually. It's not performant and is prone to errors like this one. If I were doing it, I'd have one element that moves up out of the envelope, then toggle its visibility and show the one that has the text. Do the reverse otherwise. That can also be done in the timeline itself, not a .call() function.