[clearProps of Timeline]

Will do. 

 

thank you.

[clearProps of Timeline]

HI guys,

 

Im relatively new to GSAP, and so far, so good. But I have a problem that is driving me insane, which I believe is the same issue stated in this thread (but its resolution did not work for me).

 

I have a simple timeline, which changes some SVG styles when the mouse doesn't move for 500ms. If the mouse moves, the timeline is paused, and then restarted again. This all works well, the timeline fires correctly, styles change, and the onComplete code does its thing.

 

My problem: The styles modified by the timeline will not go away, no matter what combinations of the many approaches to clear, kill, clearProps, and everything else I could find. the DOM node for the SVG circle ALWAYS has a style tag with the fill color used in the timeline.  

 

What am I missing? I was hoping this would be simple, so I wouldnt have to put together a codepen

Ideally, when the timeline completes, this DOM node should never know GSAP was there - full revert, no sneaky fingers in attributes, nothing. Isnt there a way to properly kill this thing cleanly?

 

thanks

Brent

 

    MouseMoveTimeout(){
        window.clearTimeout(this.moveTimeout);
        this.tl.pause(0);

        this.moveTimeout = window.setTimeout(()=>{
            this.tl.restart();
        }, 500);
    }

 

            this.tl = gsap.timeline({onComplete: () => {
				// tried everything here that i could find in every forum to clear the style attribute
	
                this.lineCreate.x1 = this.snapCircle.x;
                this.lineCreate.y1 = this.snapCircle.y;      
                this.lineCreate.x2 = this.snapCircle.x;
                this.lineCreate.y2 = this.snapCircle.y;
                
            }, paused:true, defaults: { ease: "none" }})
            .to(this.todoCircle, {duration:.5, fill:"#0C00FF", attr:{r:2}})
            .to(this.todoCircle, {duration:.1, fill: "#0FFF00"})
            .to(this.todoCircle, {duration:.1, fill: "#0C00FF"})
            .set(this.todoCircle, {clearProps: "all"}); // this didnt work either