Difficulty getting TimelineMax to work

[jstafford 23 Likes (Newbie)]

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

[Carl 9,066 Likes (Superhero)]

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"/>

http://codepen.io/GreenSock/pen/obYPqv?editors=100

[jstafford 23 Likes (Newbie)]

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.