aderaaij

Hi Carl, Thanks for the fantastic reply. I absolutely understand this is more of a general Javascript question than anything else, so I appreciate you taking the time to point me into the right direction. I won't have time to try your suggestions until the end of the week, but I'm sure I can get a bit ahead again. Just to clarify one thing; you say it's better to create one master timeline? Would I then control different parts of the animation with tl.play, etc? Thanks again!

I'm currently trying to build a slideshow to practice whatever I learn about Greensock. Most things behave as expected, except for when I click next/prev real fast. In that case the slideout animation never gets fired, and the next time I reach the same slide, everything is already animated. What would be the best way to prevent this from happening? Thanks! Small edit: Got the same with this pen: http://codepen.io/aderaaij/pen/QjedBd

That's awesome! The code is pretty self explanatory as well, so no questions there. I really need to do some reading up in the docs, there seems to be a solution for everything already. Thanks again for the quick support, greatly appreciated! And also thank you for showing multiple methods, very useful. edit: One more question while I'm at it, if I wanted to add a delay before morphing the menubars into the logo, how would I do that? If I add an extra property with '+=.5' to the second tween, the entire animation reverses again on hover.

oh that's fast, and way more elegant than I came up with, and addPause() is a nice one, thanks! One questions though: 1. Is it possible to make the animation so that first the bars animate in, then they morph into the logo, and only on hover the logo morphs into the menu bar (and on mouseout back to the logo)?

Hi all, I'm a bit confused on how to get the following result. I want to create an animation of different SVG elements that does the following (see the codepen link for the idea): start: Animate menu bars in start: morph menu bars to logo letters onHover: morph logo letters back to menu bars onClick: animate menu bars into a closing button The start is there, but I am not sure how to reverse just the logo letters back to menu bars on hover. I hope you guys can point me into the right directions! Thanks

Ah I might've not explained it well, but the problem isn't with the ajax calls. The problem is only at the initial animation which is called on document.ready (same as splittext). The link to the JS file is in the footer so I assume that shouldn't give any problems. I do have to add that I've got the splittext var and animation sequence in one seperate function. Maybe moving it outside of the function would help somehow? edit: I put the first animation in a $(window).load(function() { }); and all is well! Thanks

Hi guys, thank you so much for the quick answers and apologies for the late reply, I didn't have e-mail notifications on and didn't expect such swift answers. Much kudos for you guys. Indeed Diaco, your answer was absolutely right. First I had my text styles on the P tag, but as this is changed into multiple DIV's when handled by splittext, which made them lose their styles. In my train of thought it was logical to redeclare those on the DIV, causing my problem. Now I declared them straight on the .quoteHero__quoteContent and everything works like a charm. Thanks again, I really enjoy working with greensock, and knowing the support is this great makes it even better. edit: While I'm at it, I've got something I can't seem to reproduce on Codepen. On my localhost the codepen example is part of a slideshow. The first loads in plain html, the next ones are loaded through ajax. On first load the lines still aren't broken on the right points. When I ajax load the next one they all animate fine though. When I add a timeout to the animate function it works fine as well. Is that something that sounds familiair and might have an easy fix?

I've been trying to recreate the 'lines' demo in the following codepen: http://codepen.io/GreenSock/pen/gFHza but somehow my version keeps breaking the lines at the wrong point. Could someone perhaps give me any pointers on what I'm doing wrong? I've tried widening the container div, changing font-size units, etc. but to no avail. http://codepen.io/aderaaij/pen/dYGgmz Any help is greatly appreciated.