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});
}