Jump to content
Search Community

Site Logo Reverse Animation

cam obrien test
Moderator Tag

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

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.

See the Pen bjqgVb by camobrien343 (@camobrien343) on CodePen

Link to comment
Share on other sites

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

 

Link to comment
Share on other sites

Hi @cam obrien :)

 

Welcome to the forum.

 

I'm not sure I understood the question completely. Is this what you needed?

 

See the Pen WKpRMx by PointC (@PointC) on CodePen

Just an FYI, the drawSVG plugin makes this type of animation easier and fixes browser inconsistencies. More info:

https://greensock.com/docs/Plugins/DrawSVGPlugin

 

Happy tweening.

:)

 

  • Like 4
Link to comment
Share on other sites

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.

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.
×
×
  • Create New...