Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Difficulty getting TimelineMax to work

Recommended Posts

Well, I spent all day yesterday debugging this problem and no solution. : /


PointC got me started adapting a Tympanus tutorial hover effect and my further work on this can be seen here:

See the Pen rxMEaj by jstafford (@jstafford) on CodePen

  . This works and it is the effect I want, but integrating this into my navbar setup is proving problematic, and I am stumped as to why.


 --> This is a reduced example of my setup and it is showing the same problems I have locally. As you see, this effect is going to be part of my navbar, but the TimelineMax is not working at all. For kicks, I swapped out the tlDesktopLinkHover.play() in the desktopLinkOnMouseenter function with TweenMax.to($(this).find($("#desktopLinkHomeIconTextLayer").find("path")), 1, {fill:"#ffffff"}) and behold, IT WORKS!


I thought that loading the SVG into my DOM was the difference since the working codpen example 

See the Pen rxMEaj by jstafford (@jstafford) on CodePen

is just inline SVG pasted in (not injected into my DOM with ajax like I am doing), but I am even seeing the same issues as I am locally in this codpen example

See the Pen MKbqgE by jstafford (@jstafford) on CodePen

that is a mockup of my navbar setup.


What am I missing? 

See the Pen MKbqgE by jstafford (@jstafford) on CodePen

Link to comment
Share on other sites

it looks like the <line> nodes you are using need some more data


<line class="st0" x1="700" x2="700" y2="450" />
<line class="st0" x2="700" />
<line class="st0" y1="450" />
<line class="st0" x1="700" y1="450" y2="450" />

I quickly changed some values (and simplified the timeline) and it seems to work fine:

<line x1="0" y1="0" x2="200" y2="200" fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="4"/>
<line x1="0" y1="200" x2="200" y2="0" fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="4"/>


  • Like 3
Link to comment
Share on other sites

Dang, that was it Carl. I coded the svg rectangle and lines in an editor instead of manually drawing and exporting from Illustrator for precision sake. I forgot the styling attributes. Thanks.

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.