OnReverseComplete triggered by wrong element

[lemonetti]

Hello,

 

I did a demo with DrawSVG and ScrollTrigger. After the first line completes the Element should appear and vice versa when you scroll the line back up the element should disappear again. In my demo this works as expected but for some reason the OnReverseComplete of the first line gets also triggered by the second line, which should not happen. I hope I made my problem clear. Can somedbody help me with that?

Thank you in advance!!

See the Pen NWzQezW by clmsftsw (@clmsftsw) on CodePen

[Carl]

Hi,

Any chance you can simplify this to plainly show that an onReverseComplete isn't working properly?

Unfortunately I'm having trouble assessing what all those tweens are doing and it isn't clear what things like .circle-line-2 or .line-2-a are without hunting through a whole bunch of svg code.

 

My suggestions would be

• get rid of the loop. show just 1 timeline with 1 ScrollTrigger
• remove the svgs entirely
• use 2 or 3 divs with clear names / classes (.red, .blue, .green, etc) so it's very clear what should be animating in each tween
• for the animations just use a very simple x, rotation, or opacity change
• make sure the trigger element is fully visible.
• add callbacks to onComplete and onReverseComplete

I'm confident that a clean demo will help us get you a quicker and more accurate solution that you can apply to your project.

 

 

[Rodrigo]

Hi,

 

The issue that I can see is that you are looping two elements with the class ".line-trigger" and you are creating a ScrollTrigger instance for each one. Each one of those ScrollTrigger instances has it's own selector which points to specific child elements in the SVG. So far so good. The problem is this:

onComplete: () => {
  gsap.set(q(".circle-line-2"), { opacity: 0 });
  jQuery(".element").addClass("line-complete");
},
onReverseComplete: () => {
  jQuery(".element").removeClass("line-complete");
},

Right there you're selecting the same element in both ScrollTrigger instances so what's happening is quite logic and not a problem with GSAP, ScrollTrigger is doing exactly what's supposed to. You just need to add those callbacks on the first ScrollTrigger instance not the second.

 

Hopefully this clear things up. Let us know if you have more questions.

 

Happy Tweening!