DrawSVG on button hover

[RescueSCG]

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: 

 

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

See the Pen JGgVzr by aaronsleeper (@aaronsleeper) on CodePen.

[Carl]

Hi and welcome to the GreenSock forums.

 

Thanks for your question and the demo.

 

Take a look at this simplified example: 

 

//once js runs un-hide the svg
TweenLite.set("svg", {visibility:"visible"});
//hide the stroke
TweenLite.set("rect", {drawSVG:0})


//create a tween in a paused state
var tween = TweenLite.to("rect", 0.5, {drawSVG:true, paused:true});




// play/reverse on over/out
$("rect").hover(over, out);


function out() {
  tween.reverse();
}


function over() {
  tween.play();
}

http://codepen.io/GreenSock/pen/GoVape

 

To avoid any flickering of the stroke on page load I use CSS to set display:hidden on the svg and then set it to visible once the JavaScript executes.

 

Let us know if you need more help.

[RescueSCG]

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

[Carl]

Yes, that is totally possible. From just looking at your code it seems like what you have should work fine. You will probably need to set each highligh to drawSVG:0 on page load like:

TweenLite.set(".highlight", {drawSVG:0});

[Jonathan]

Here is an example of adding multiple elements and timelines to a hover event

 

See the Pen KdYqWo?editors=0010 by jonathan (@jonathan) on CodePen.

 

Im just animating the x , border-radius and background-color in my above example.

 

But any timeline with various properties would work!

 

You just assign your timeline var, to each elements DOM node within a loop:

// set some global properties
TweenMax.set(".item", {transformOrigin:"50% 50%"});

// loop through each element
$(".item").each(function(i, el) {
  
  // set some individual properties (random background-color in this example)
  TweenMax.set(el, {backgroundColor:'#' + Math.floor(Math.random() * 16777215).toString(16)});
  
  // create a timeline for this element in paused state
  var tl = new TimelineMax({paused: true});

  // create your tween of the timeline in a variable
  tl
  .to(el, 0.4, {x:25, ease:Power1.easeInOut});

  // store the tween timeline in the javascript DOM node
  el.animation = tl;

  //create the event handler
  $(el).on("mouseenter",function(){
    this.animation.play();
  }).on("mouseleave",function(){
    this.animation.reverse();
  });
  
});

Hope this helps!

[RescueSCG]

thank you both!