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.

I should add, this is what was working, however I am getting another error "Uncaught cannot tween a null target" for the function below, on the marked line. Like I said, worked fine before I moved to wordpress. Haven't changed any of the js. 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-greensock-js', 'http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js'); tl2.set('#overlay', { zIndex: 5 }) .set('#close', { zIndex: 6 }) .set('#overlay-text', { zIndex: 6 }) .to("#closed", 1, { morphSVG: { shape: "#open" } }) .to(close, 0.6, { //Error here opacity: 1, ease: Expo.easeInOut }, 0)

Hey guys, I built a few webpages and was using tweenmax to animate some stuff. I recently bought a license so I could use morphsvg and I am loading those in to that local site and it's working great. Here's what I am loading. <!-- Modernizr (feature detection) --> <script src="js/modernizr.js"></script> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> <!--TweenMax--> <script src="js/tweenmax.js"></script> <!--MorphSVG plugin--> <script src="js/plugins/morphsvgplugin.js"></script> <!-- Latest compiled and minified Bootstrap JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> <!-- My scripts --> <script src="js/scripts.js"></script> Now we are moving the site to wordpress and so I am having to enqueue the files into wordpress. We were enqueue-ing greensock through the cdn originally and it worked great. Now that I have switched it to local js files it is broken, saying Tweenmax is undefined. I suspect something is wrong with what I am loading, or the order I am loading it in, but I can't seem to figure it out. Is there anything special I should do for wordpress? Here's my enqueue loading order. 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' );

Thanks guys! It was loading 1.18.0 apparently. @PointC, you gotta switch it up sometimes, and besides, Cage images can be gifs!

So I have a pen here, and it's all working just fine, but my corresponding code on my local machine does nothing. I can see that the script is loading, but no animation is taking place. I'm not getting errors or anything, just nothing is happening, so I have no idea how to debug! Ideas?

@Jack, yep, you're right. It's always something small!

So I'm using scrollmagic for an infographic, and I have a smooth scroll plugin that I was trying to use that hasn't been updated in a while (last used in January), but TweenMax has! The script is throwing all sorts of errors and completely breaking the animation. I'm getting the error "Uncaught TypeError: Failed to execute 'scrollTo' on 'Window': 2 arguments required, but only 0 present." Anyone know how to update this script? It's at the bottom of the js on my codepen.

@jonathan, he is the best! Thanks for your help!

I'm trying to create an infographic using scrollmagic/greensock, where I have everything in layers, and each layer tweens down to nothing as you scroll down, so whatever is beneath it is revealed on scroll. I already tried using svgs and clippaths, which was a nightmare since I'm new to them and scrollmagic both. So I decided to use css border-radius. My problem right now is that I'm trying to scale these down and nothing seems to be happening. If I look in my console I will see the styles scaleX: 0 and scaleY: 0 have been applied but the image will still be the same width and height. It doesn't move at all.

@OSUBlake, once again thank you for educating us beginners.

@Dipscom, so I've implemented OSUblake's solution, but I'm afraid I'm super new to jquery, so I don't really understand how I can go about animating the plays divs with clicking on the titles divs. http://codepen.io/kathryncrawford/pen/ojKXOd?editors=101