cam obrien

Thank-you very much, that is what I was looking for. Is it easy to have the svg path be filled in with #000 when the logo is not active? Then when it's hovered, the static fill is removed and the animation draws like your example above? It looks like if I can target the stroke-dashoffset and set it's value to "0" it shows, but I'm having trouble targeting it.

Here is my js, sorry for the mess var tl = new TimelineMax(); $('h1.site-title').mouseover(function(){ tl.restart(); tl.add([ TweenLite.to(paths.eq(0), 1, {strokeDashoffset: 0, delay: 0.0}), TweenLite.to(paths.eq(1), 1, {strokeDashoffset: 0, delay: 0.5}), ]); }); $('h1.site-title').mouseout(function(){ tl.reverse('#myClip', true); var mainTl = new TimelineMax({ reversed:true }); mainTl.add([ TweenLite.to(paths.eq(0), 1, {strokeDashoffset: 0, delay: 0.0}), TweenLite.to(paths.eq(1), 1, {strokeDashoffset: 0, delay: 0.5}), ]); });

Hello, I'm created an svg logo that draws in, but I am struggling with some other code. When the page first loads the svg logo draws in. Then when mouse leaves the h1, it continues to stay draw in using a svg fill on my clip-path. If the user hovers back over it again, I would like the svg to clear the previous animation and start drawing it again from the beginning.