RescueSCG

thank you both!

That's great. Thanks so much Carl. I'm trying to modify this so it can apply to multiple buttons on the page. I have it working on a per button basis like this but it seems hacky. Is there a way to pass the current hovered button as a var into the tween? // play/reverse on over/out $(".btn").hover(function() { var curBtnHighlight = $(this).find(".highlight"); var btnHighlight = TweenLite.to(curBtnHighlight, 0.5, {drawSVG:true}); }, function() { var curBtnHighlight = $(this).find(".highlight"); var btnHighlight = TweenLite.to(curBtnHighlight, 0.5, {drawSVG:false}); });

Can someone help me fix my code or point me at a tutorial? I've been unable to find code that works in my searching and I'm still pretty new to GSAP. I'm trying to get a DrawSVG line animation to happen from 0 to 100 on hover of a button and then when the mouse leaves the button I want the animation to go back from 100 to 0. I'm also having trouble getting the line to start at 0. When the page loads the line is at 100. Here's my codepen: http://codepen.io/aaronsleeper/pen/JGgVzr And here's my current script: $('.btn').hover(highlightOver, highlightOut); function highlightOver(){ TweenLite.from($(this).find('.highlight'), 0.3, {drawSVG:0,ease:Expo.easeOut}); } function highlightOut(){ TweenLite.to($(this).find('.highlight'), 0.3, {drawSVG:0,ease:Expo.easeOut}); }