PointC

Well sure - if you wanna get all fancy with it.

Hi Jimmy , Is that what you are trying to achieve?: http://codepen.io/PointC/pen/rOpNKM Looks like there is a piece of the flag (a shadow?) that isn't in the group. Otherwise, that should get you started. EDIT: PS I removed all the head elements and script tags from the CodePen (it doesn't need it) and loaded jQuery through CodePen for you.

Absolutely! I had to watch the demo twice to see the other morphs. During my first viewing, I was so mesmerized by that cape I didn't see anything else. So cooooool!

If I could throw my 2 cents worth in here: The one finite resource any of us have is time. I completely agree with Carl in how someone should look at an educational resource - will it save me time? Will I have a new or improved skill that I can monetize or create better products for my clients? If you're going to earn the cost back, it's a no-brainer - go for it. Boost your skill-set. In the case of GSAP, I think one can also factor in the helpfulness of this forum and community. I personally use a lot of different software packages in my work and I've never experienced the level of responsiveness and just plain awesomeness that Jack and Carl and all the moderators and members provide here - and all that extra help doesn't cost anything more than a 'Thank You' post when you get the right answer.

I just took a look at your pen in IE11 and the words are fading on correctly. I also checked IE10 and it all looks fine to me.

Did I miss an email? I just noticed 1.18 in my downloads section. SWEET!!! Thanks Jack and Carl!

I think you already asked this question in this thread. http://greensock.com/forums/topic/12331-tweening-background-image-svgs/

To add to the info from Jonathan and the pen from Diaco - Your revised pen (after you moved the SVG inline) was working correctly, but the y movement (you had 8px and 2.5px was all that was necessary) was just sending the top and bottom menu pieces off of the button so the rotation was happening outside the viewing area.

Hi bobbyopulent , I'm not sure about animating properties of an SVG set as a background image (others will probably answer about possible ways to do that), but I would think a simple solution to achieving the same thing would be putting your SVG inline within your container/div with an absolute position and lower z-index than the rest of your content. You can then scale the SVG to match the container very easily while still retaining all the animation property options that you would need for the 'background' SVG. Happy tweening.

Hi saracup, If I understand you correctly, you want the animation paused until the user manually scrolls to the div containing your timeline. If that's the case, you'll probably want to use something like ScrollMagic or waypoints to trigger the animation when the user scrolls to the containing div. One of the forum users here (ihatetomatoes ) has excellent info and tutorials about ScrollMagic: https://ihatetomatoes.net/simple-scrollmagic-tutorial/ The GSAP ScrollTo plugin that you are showing in your question will animate the window or a div position, but it sounds like you're wanting the user to scroll manually in which case you wouldn't need that plugin. Of course, you could certainly use the ScrollTo plugin to animate the window scroll to the div containing your main animation and then have it start as well. I hope this helps. Happy tweening. PS The best way to get specific answers to specific questions is to make a CodePen demo: http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/

Some of the code gurus around here may also have some more info about a way to make GSAP work with embedded SVGs. For my 2 cents worth here - I'd leave the SVG inline to give you the greatest amount of control with the least amount of hassle. GSAP can then easily work with any of your IDs, groups and classes without any difficulty. Yes - sometimes the SVG code can get a bit long, but that's really more of a human problem (ugh - look at all that code!) than a problem for the browser. Most text editors have a little twirl icon to hide blocks of code while you're working anyway so you don't have to scroll through it all the time. Of course, this is all just my opinion - YMMV. Edit: yep Diaco already has code info for you.

Hey everyone, I don't personally produce any ads or banners, but I know a lot of forum users here do so this may be of additional interest to those members. http://marketingland.com/adobe-flash-takes-another-hit-as-amazon-moves-to-eliminate-all-flash-based-ads-139626

Hey there pixelarchitect , Like this? http://codepen.io/PointC/pen/KpLzpG I just added a group around the part you wanted to stay perpendicular and rotated it the opposite direction.

Hey Blake, I was curious as to why his original pen is working in Firefox? Is symbol rendering different in Chrome?

Hey sepokroce , I'm sure someone smarter than myself will jump in and figure out why that doesn't work in Chrome and IE. In the meantime, I did a quick fork or your pen and added a class to each symbol and animated the class rather than the ID and it works in all browsers. http://codepen.io/PointC/pen/WvBrQR

Hey gChambers, I too have quite a bit more experience with After Effects than Javascript and GSAP, but this forum will almost always have a quick answer for any of your problems or questions. Carl and the rest of the moderators are wizards when it comes to helping and they are never condescending no matter how basic the question may be. So.. I say ask away - you'll be happy you did.

Hey JLernDesign , I've been working a lot with SVGs lately so I'm assuming you're referring to setting a stroke-dasharray in your path settings and then having the DrawSVG plugin turn it into a solid line during animation? I won't pretend to understand the inner-workings of the plug-in, but the docs state that the animation uses stroke-dasharray and stroke-dashoffset CSS properties so I would make a guess that any stroke-dasharray settings in the SVG path are being overwritten by the plug-in? I'm curious about this myself so maybe Carl or Jack could let us know if animating a dashed stroke is possible?

I had never seen it before, but I'll acknowledge it now - that's cool!

Hey Lynx , Looks like you may be looking for the quick start video and information posted here: http://greensock.com/get-started-js#loading

Thanks Jack. I actually didn't think it would work, but in my experiment with it wrapped in a containing div, it does animate the text so I was foolishly trying to make it work.

Hey everyone, I'm trying to use SplitText with some SVG text and having some difficulty. I've tried using a parent div of the SVG, but I lose positioning and other pieces of the SVG. I've tried using an ID on the text element itself, but it seems to not give any size to the array of divs. More details are in my CodePen. Thanks. PS the TextPlugin and ScrambleTextPlugin work perfectly with my SVG text.

Hi cormack , GSAP can animate most CSS properties. Complete reading is here in the docs: http://greensock.com/docs/#/HTML5/Plugins/CSSPlugin/

Hello BadAnderson , I think the simplest approach to different tweens at different screen sizes would be to tween between classes. You could have a class name to size your logo and tween your element to it. That class can then be set in your media queries to different percentages for different screen sizes. Here's the class tweening from the docs: Allows you to morph between classes on an element. For example, let's say myElement has a class of "class1"currently and you want to change to "class2" and animate the differences, you could do this: TweenLite.to(myElement, 1, {className:"class2"}); And if you want to ADD the class to the existing one, you can simply use the "+=" prefix. To remove a class, use the"-=" prefix like this: TweenLite.to(myElement, 1, {className:"+=class2"}); Note: there are some css-related properties that don't tween like IE filters, but almost every css property is recognized and animates great. Also, there is a slight speed penalty when a className tween initializes because the engine needs to loop through all of the css properties to see which ones are different.

Hey Diaco and Blake , Thanks so much for the info and Codepens - I greatly appreciate it and both of those are so much better than what I wrote. Uggggh - I have so much to learn. Thanks again.

Hey everyone, I can usually get things working fine, but quite often I seem to over complicate some things or take the wrong approach so I'm looking for some advice. I've got 4 buttons that will each have their own independent SVG animation on hover. (For the purposes of the Codepen, it's just a simple box inside each button.) The four timelines are set up as variables. I'm using a data attribute (that matches the timeline variable name) on each button to choose the timeline to play. Everything works fine, but I'm just looking for advice on the best way to do this. To convert the data-attribute to the variable name and allow it to play the timeline, I've found two ways 1: eval(varName) 2: window[varName] Both methods seem to accomplish the task, but I've read a bit that says eval() is bad and poses problems, while other info says it's fine and poses no security problems if no data is coming from the user. So.. which is better... or is there a completely different approach to this that I'm missing? Thanks.