PointC

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.

Hi yihaod Welcome to the GreenSock forum. I'll echo Carl's advice about Diaco's pens and you'll find some more nice slider examples on CodePen. As far as starting ideas - my best advice is: start simple. Forget about your images for the moment. Create a few plain colored divs and a few buttons and get the functionality to your liking. You can always move buttons, change backgrounds, add images etc... The point is not to get bogged down in styling everything right out of the gate. The best way to figure out the code is just start trying it. You'll most certainly have GSAP related questions as you get going and we're here to help you through that part of it. If you haven't set up a CodePen account, I'd highly recommend it. It's extremely important that we see your code as you ask questions. Please check out this link for details about that: http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/ You can also fork pens on CodePen and break them apart to see how they were created. That can be very educational. Hopefully that helps a little bit. Please post any GreenSock related questions here as you get going. We will always do our best to help you. Happy tweening.

Hi SoL2Squiz It looks like Dipscom has solved your sprite sheet problem, but I thought I'd throw my 2 cents worth out there for you. Sometimes a sprite sheet may be the best solution, but you may want to look at SVGs for this type of animation. They offer so many advantages like responsive scaling, making easy changes to the text, smoother animations, color changes for your data... and the list goes on. In your example you have 12 pieces of text, some circles, a rectangle and one path. This works perfectly as a SVG. I made a little CodePen for you using the SVG instead of your sprite sheet. The SVG is about 3KB whereas the sprite sheet is 249KB and offers no way to change it. http://codepen.io/PointC/pen/yOvOLO/ Just my opinion, but hopefully it gives you some new ideas. Happy tweening

Thanks Carl. It's my new mission to get everyone hooked on animating the viewBox with GSAP.

Hi amoeboar Welcome to the forums. This looks like a great job for a stagger. We can get this down to one line of code for you. TweenMax.staggerTo('.refill-circle', 15, {rotationY:540, rotationX:1080, ease:Power1.easeInOut},0.3) You might have to play with the rotations and stagger time to get it to your liking, but I think this should work for you. http://codepen.io/PointC/pen/RaxzdV/ Hopefully that helps a bit. Happy tweening and welcome aboard. Edit: I forgot to mention it, but if you haven't read about stagger yet, please check out the docs here: http://greensock.com/docs/#/HTML5/GSAP/TweenMax/staggerTo/

You're welcome. I'm happy to help and glad you found my house tour animation inspirational. Yes - please share your finished work when it's ready. I'd love to see it.

Hi kylegach Welcome to the forums. I think there is just a little problem with the coordinates you're using. The viewBox can be a bit strange to start using at first, but we can get you fixed up. Let's look at your simplified static demo (thank you for that - much easier to help with stripped down demos) // this is your current viewBox <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="420 310 1004 748"> // but to zoom to the orange rectangle, it should be <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="420 310 584 438"> The starting x/y is indeed 420/310, but the 1004/748 that you're using are not ending coordinates. (I thought the same thing the first time I used the viewBox.) The second set of numbers is how far along the x/y you want the view to extend. So in your example, the actual end coordinates are 1424/1058 which is why the zoom to orange box isn't working correctly. The orange box is 584 units by 438 units so that is how far we want to extend the viewBox. That is also in the exact aspect ratio as your SVG so this works perfectly. We then use a viewBox="420 310 584 438" and it should zoom correctly. Hopefully that makes sense and helps a bit. Let us know if you have any more problems. Happy tweening and welcome aboard.

o.k. - I took your arrows into Adobe Illustrator and added some anchor points. One on the middle of the curved part of the start path and one on each side of the 'v' shape on the ending path. Is this more the way you wanted your morph to look? http://codepen.io/PointC/pen/repGKv/

There was actually another post about that started earlier today and Jack had a good answer: http://greensock.com/forums/topic/14129-morphsvg-change-start-and-end-point/

Hey jstafford Looks like you're naming and trying to morph the entire SVG. Just move your ID to the paths themselves and it all should work fine for you. //switch this <svg id="arrow-left-post-hover" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 451.8 451.8"> <path d="M97.1,225.9c0-8.1,3.1-16.2,9.3-22.4L300.7,9.3c12.4-12.4,32.4-12.4,44.8,0c12.4,12.4,12.4,32.4,0,44.7L173.5,225.9 l171.9,171.9c12.4,12.4,12.4,32.4,0,44.7c-12.4,12.4-32.4,12.4-44.8,0L106.4,248.3C100.2,242.1,97.1,234,97.1,225.9z"/> </svg> // to this <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 451.8 451.8"> <path id="arrow-left-post-hover" d="M97.1,225.9c0-8.1,3.1-16.2,9.3-22.4L300.7,9.3c12.4-12.4,32.4-12.4,44.8,0c12.4,12.4,12.4,32.4,0,44.7L173.5,225.9 l171.9,171.9c12.4,12.4,12.4,32.4,0,44.7c-12.4,12.4-32.4,12.4-44.8,0L106.4,248.3C100.2,242.1,97.1,234,97.1,225.9z"/> </svg> Hopefully that helps. Happy morphing.