kathryn.crawford

@Dipscom, gotcha. I cleaned it up a lot, but yeah on the actual site it is a lot of code. Cleaning out the text, rect, and clip-paths fixed the timing though, so thanks! Split Text might be a good idea though. As far as what I want, well the client loves animation, so I guess the most I can get on a page without it looking bad or bogging down the page, haha.

Oh I see part of my problem. The top rectangle is mostly fill, which is why it's not drawing, but what about the text? Can DrawSVG do text?

Hey guys! I'm trying to draw out a rather dense set of SVGs. Ideally I'd like to draw out EVERYTHING, including the boxes on top, and the text (if that's possible?). But either way I'm having weird issues with the timing. I'm guessing it's related to how I am calling the "shapes" variable, like maybe it's running through a LOT of shapes, but only really drawing the lines? Any suggestions would be helpful!

Thanks Gardemarin, that might be worth a try! Wouldn't be completely true to the geometry but I might be able to fake it close enough to work!

SHOOT! I was really hoping it could be done, but I guess I didn't know enough to realize how complicated it is! I might try doing this with css altered divs in the future, but for now it seems like more trouble than it's worth. Thanks guys!

Hey guys! Im trying to recreate this as an SVG animation using greensock. I got stuck pretty quickly with a diagonal fold (I'm new to 3D). As you can see, I'm about halfway there! But it doesn't fold quite like it should. I need it to fold like it would with paper, across the diagonal line with no flipping. Any ideas?

Thanks Jonathan, I didn't realize tweening the body could cause issues like that. Good to know!

Hey guys, I was wondering, is it possible to tween the body background image? I know you can on other divs (or I guess more precisely you tween the whole dom element) but with the body everything seems to tween BUT the background image. I've tried both opacity and autoAlpha, and any dom elements within the body tween fine, but the background image is visible on load. Any way to do this? If not, no biggy. I just wanted to keep my code cleaner and avoid having a fullscreen img tag hanging around in my HTML.

Hey guys, Is it possible to tween the cursor css property? I've got a div on my website that expands on hover, and I'd like to change the cursor when it expands so that you know to click on it to do more. So, is it possible to tween the cursor property? I've attached a codepen that's a basic example of what I'm trying to do.

Yay Carl! That solved the issue of it not working with my local gsap files.

@Carl, ah shoot. I was using width and height so that they would all scale to the same size even though they begin at different sizes. Guess it's back to the drawing board! Thanks!

I've created a bunch of divs that contain circle background images on my site. I've set them up to expand/contract on hover/mouseleave. The hover expand works great, but I can't get the transform origin to change. Maybe it's because they are absolutely positioned (which I can't change), but they all seem to expand from different starting points. The ones above expand from the top and the ones below from the bottom. Is there any way to get them all to expand from the center?

Is there anything wrong with the order I'm calling my gsap files in? If not I might just ask wordpress what's up. It may be an issue specific to them, like loading my scripts in the footer was. wp_enqueue_script( 'blueleaf-bootstrap-js', THEME_DIRECTORY . '/js/bootstrap.min.js', array('jquery'), '3.3.5',true ); wp_enqueue_script( 'blueleaf-navigation', THEME_DIRECTORY . '/js/navigation.js', array(), '20120206', true ); wp_enqueue_script( 'blueleaf-jquery-js', THEME_DIRECTORY . '/js/greensock/jquery.gsap.js', '0.1.12'); wp_enqueue_script( 'blueleaf-greensock-js', THEME_DIRECTORY . '/js/greensock/timelinemax.js', '1.8.1'); wp_enqueue_script( 'blueleaf-easing-js', THEME_DIRECTORY . '/js/greensock/easing/easepack.js', '0.8.0'); wp_enqueue_script( 'blueleaf-morphsvg-js', THEME_DIRECTORY . '/js/greensock/plugins/morphsvgplugin.js', '0.8.0'); wp_enqueue_script( 'blueleaf-scripts', THEME_DIRECTORY . '/js/scripts.js' ); wp_enqueue_script( 'blueleaf-modernizr', THEME_DIRECTORY . '/js/modernizr.js', '3.2.0' );

@Jonathan, I moved the enqueue to the footer and it worked! Must have been something weird about how wordpress loads stuff. Looks like my scripts file was being loaded first, even though it was telling me it was last. As for posting the link to the site, unfortunately it's only local right now, so I can't share it with anyone.

I moved my scripts.js file into the footer, and now everything works, with the cdn link, but it does not do anything if I use my local gsap files. No error's just no tweening.