Jump to content
GreenSock

RescueSCG

DrawSVG on button hover

Go to solution Solved by Jonathan,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

Link to comment
Share on other sites

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.

  • Like 2
Link to comment
Share on other sites

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});
      });
  • Like 1
Link to comment
Share on other sites

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});
  • Like 2
Link to comment
Share on other sites

  • Solution

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! :)

  • Like 4
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×