PointC

Hi valiz22 Welcome to the forums. I'm not sure what part you need help with. It looks like you're pretty close. The site you linked to just moves -26px and then plays a secondary animation, moves -26px and then plays another one etc. It looks like your list is moving the full 260px in one tween. There are a few ways to go about this. You could set up a loop and move -26px on each iteration with a pause between or you could create the 26px movement in a function that gets called at the end of each secondary animation. I'd like to give you more specific answers, but I'm not sure what exactly isn't working. Do you have a particular GreenSock related question about something that isn't working correctly? Happy tweening.

Hi PINELABS IT Welcome to the forums. Yep - physics are really cool and a lot of fun. We had a similar question asked not too long ago and Blake provided several examples as well as some great book recommendations to enhance your learning in this area. Please take a look: http://greensock.com/forums/topic/14033-looking-to-learn-more-about-physics/ Hopefully that helps a bit. Happy tweening and welcome aboard.

Hi Zannen Welcome to the forums. I took a look at your pen, but saw some errors so you may still be working on that? Anyway, Jonathan has posted some great information about animating a gradient here: http://greensock.com/forums/topic/13685-morphsvg-animating-gradient-assets/ You also asked about an easier way to do this. Depending on your needs, you may be able to fake the transition. You could do that by adding the desired ending gradient to your end path and the desired starting gradient to your start path. Make sure your end path(s) are above your start path(s) and hidden via the CSS. Then you simply morph your start path into the end path. When the morph ends, you tween the autoAlpha of the end path up to 1. Since the start path is now the same shape and position as the end, it looks like the gradient is actually shifting. It's a cheat, but it's simple and may work for you. Here's a simple CodePen with that possibility. http://codepen.io/PointC/pen/XdBvEB/ Hopefully that helps a bit. Happy tweening and welcome aboard.

Hey celli I took a look at your pen and it looks to me like most of the problem on repeat is coming from your relative overlap on line 21. There seems to be a fight for control of scale, cx and cy .to("#circleThree", .5, {scale:.6, attr:{cx:144, cy:108, ease:Expo.easeOut}},"-=1.4") .to("#circleTwo", .5, {scale:.6, attr:{cx:461,cy:100, ease:Expo.easeOut}},"-=1.4") .to("#circleOne", .5, {scale:.6, attr:{cx:300,cy:264, ease:Expo.easeOut}},"-=1.4") .to("#circleOne, #circleTwo, #circleThree", .35, {scale:.2, autoAlpha:0, attr:{cx:300, cy:180, ease:Expo.easeIn}},"-=.92") // this overlap of -=.92 is causing an instant fight with the three Tweens above it - remove it and it all works fine I know you can't simply remove it and get the look you want, but you may have to adjust this a bit to prevent the fight for control and a proper repeat. Hopefully that helps a bit.

Those are great Blake. I especially like the simplicity of the circle one. That could be quite handy. One might imagine that would be more complex, but your pen certainly shows how easily it can be done. Very nice sir.

Hi Trang Welcome to the forums. I'm not sure if there are any plans for that tool, but the question was asked not too long ago and this thread may help: http://greensock.com/forums/topic/12149-when-can-we-get-the-timeline-visualizer/ Carl will probably post an answer for you if there is any additional information available. Happy tweening and welcome aboard.

That's how we roll here in the GreenSock neighborhood.

Hi alextodea Welcome to the forums. If I understand your question correctly, you'd like the svg (x in a circle) to move one way on click and then reverse on click again? There would be a few ways to do that, but I'd probably just set up a timeline and play/reverse it on click. Something like this could work: var circle = $('svg'), tl = new TimelineLite({paused:true, reversed:true}); tl.to (circle, 2, {left:'20px'}); circle.click(function () { tl.reversed() ? tl.play() : tl.reverse(); }); Here's a fork of your pen with that solution: http://codepen.io/PointC/pen/RaBrpN Hopefully that helps a bit. Happy tweening and welcome aboard.

Yeah - SVG is pretty darn awesome and a lot of fun to animate. You can definitely inject the SVG if you like. We've got a few threads talking about it. Please check out this post: http://greensock.com/forums/topic/11187-accessing-svg-paths-in-external-file/?p=59586

Hi Jonah Welcome to the forums. Blake has a pretty cool pen that I think may help you: http://codepen.io/osublake/pen/eJdvMX My other thought would be - do you have the option of using SVG instead of png? If so, a world of possibilities would open up for you. Happy tweening

What is that code??? It burns my eyes! Awesome tricks Blake.

Hi Abdelrahman Welcome to the forums. You're gonna love working with GreenSock. In addition to the Getting Started video that Dipscom has linked to, I'd also recommend: The GreenSock Jump Start Collection on CodePen http://codepen.io/collection/ifybJ/ The CodePen demos are really nice because you can see everything that's happening under the hood as well as fork them and make your own changes. Truly a great learning resource. For scroll triggered animations, ScrollMagic is one of the easiest ways to make the magic happen. You should check out Petr Tichy's site (one of our forum moderators). He has quite a bit of training for it. https://ihatetomatoe...magic-tutorial/ https://ihatetomatoe...th-scrollmagic/ After that, just start making some animations and if you get stuck, post your questions here and everyone will be happy to assist you. When you do have a questions, it's always best to have code ready for us to see. You can do that by making a CodePen demo. Here's some info about that process. http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/ Hopefully that helps you start your GreenSock journey. Happy tweening and welcome aboard.

Hi icraig6666 Welcome to the forums. Most of the time you won't need to worry about that string. It will be generated upon export by your vector software. Rather than go into a long explanation here, I think this link can help you: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d Also, the drawSVG plugin will need a stroke on the path to work its magic. Hopefully that helps a little bit. Happy tweening and welcome aboard.

I think Pedro offers a money back guarantee for any computers that explode while viewing his demos.

I think you just asked about this a couple days ago in this thread: http://greensock.com/forums/topic/14189-trigger-greensock-animations-on-scroll/ We've got some links in there to Petr's site. Please take a look. Happy scrolling.

Hi celli Do you need to calculate the center on the fly? Since this is a SVG, we can just look at the viewBox of 0 0 600 361 and know that the center is 300 180.5. You could then use that as a staggerFrom() tween coordinate for your circles cx and cy attributes. circles.staggerFrom(".circleBlast", 0.8, {attr:{cx:300,cy:180.5}},0.0005) I'm not sure if that's exactly what you wanted, but here's a fork of your pen with that solution. http://codepen.io/PointC/pen/ZWoBqp Hopefully that helps.

Hi megaman Welcome to the forums. I believe this post may help you: http://greensock.com/forums/topic/13499-colorprops-tweening-from-one-linear-gradient-to-the-other-linear-gradient/ Happy tweening.

Hi pauljohnknight Welcome to the GreenSock forums. You'll probably find most people around here (myself included) use ScrollMagic. It's pretty easy to use: http://janpaepke.github.io/ScrollMagic/ You can also check out Petr Tichy's site (one of our forum moderators). He's a great teacher of all things ScrollMagic. https://ihatetomatoes.net/simple-scrollmagic-tutorial/ Hopefully that helps a bit. Happy scrolling and welcome aboard.

Hi purepixels Welcome to the GreenSock forums. Some of the problems you're seeing are from using delays on the tweens along with a position parameter offset. From() tweens are also a bit tricky sometimes. Since you're basically repeating the same animation 3 times (& then repeating those) a loop would probably work best here. I made a fork of your pen with that solution. http://codepen.io/PointC/pen/LNdBmo/ Since we show the dancer right away, the first morph of the first pass actually morphs into itself. That way we can have a seamless repeat by calling the function at the end of each timeline. For some great reading on from(), please check out this thread. http://greensock.com/forums/topic/12851-understanding-the-from-behavior/ Please also take a look at Carl's great video about the position parameter. http://greensock.com/position-parameter Hopefully that helps a bit. Happy tweening and welcome aboard.

That's really great Diaco. Let's see - we've got Blake and Diaco revving up their giant brains at the same time on the same thread. We should probably all be careful because this could potentially rip a hole in the fabric of the universe.

That's funny you posted that parallax demo. I've been working on a new CodePen demo that's quite similar. I was also tinkering with blur filters on zoom in/out to simulate depth of field. I agree - Jack should probably take over this whole operation. I don't think he has anything else to do anyway.

Holy cow - that is cool! Every time I animate the viewBox, I want to animate a camera like I do in After Effects. I'll leave the creation of the new plugin to Master Blake. Can that be ready by Friday?

Good grief! I knew I just read that answer not too long ago, but couldn't remember which post it was. I even searched the forum - not sure how I missed that. I even got some sleep last night so I have no excuse. Blake schools the new moderator. Edit - just saw your post Diaco. I like that too. Thanks much.

I've managed to confuse myself today. I have a group of 5 elements that all do something a bit different based on their index as well as an index based delayed start. So far no problem - jQuery's each method works fine for that. I have more animations that I want to play after the last 'each' timeline has finished though. I'm having trouble figuring out the best way to make sure the last 'each' timeline is finished before calling the function with the next timeline. I currently have the function call on the 'each' timelines, but that's obviously not right because it will be called 5 times. Should I be creating a master timeline from the 5 'each' timelines and calling the function at the end of that master? or is jQuery's each method not the best choice here? Should I be using a regular loop and creating those 5 timelines? What's the easiest way to make this happen? Thanks.

Hi rkeeferCD Welcome to the GreenSock forums and the wonderful world of SVGs. To answer your first question, yes - you should be able to inject the SVG for animation. We have a few threads talking about that. Blake is our resident expert. Please check out this post: http://greensock.com/forums/topic/11187-accessing-svg-paths-in-external-file/?p=59586 As for the second part of your question - the DrawSVG plugin animates the stroke, not the fill. From the docs: DrawSVGPlugin allows you to progressively reveal (or hide) the stroke of an SVG <path>, <line>, <polyline>, <polygon>, <rect>, or <ellipse> and you can even animate outward from the center of the stroke (or any position/segment). I'm not seeing any strokes in the rocket SVG you've listed above so you'll need to make a few changes to that before DrawSVG will work properly. You can just go back to your original file and add some strokes to the paths and switch some rectangles to stroked lines etc.. After that it should be easy to get you started. As you get going, we'd need to see your code in action to give you the best help. If you could create a CodePen for us, that would be best. Here's some info on doing that. http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/ Hopefully that helps a bit. Happy tweening and welcome aboard.