PointC

I'd echo Sir Jonathan's advice and recommend staying with ScrollMagic. Yes - it may be unnecessary in this case, but it's only 6kb gzipped and comes with a lot of functionality. It's lightweight and makes your life easier. But that's only my 2 cents worth. YMMV Happy scrolling.

I believe that's caused by setting your top:150px and bottom:0. Setting both can work well in situations when you haven't designated a height, but in this case you have set that to 200px. The top position will then take priority over the bottom and is apparently causing some weird issues in Chrome. If you remove bottom:0 from your .mainButton class, it all seems to work fine in Chrome.

Hi cartamundi There isn't any specific list of what GSAP can animate. It can animate almost any property of any object. I'd recommend downloading Petr Tichy's GSAP Cheat Sheet. It has a great list of the most common things you'll probably do with GSAP on a daily basis along with some additional jQuery information. http://greensock.com/forums/topic/11765-greensock-cheat-sheet/ I'd also suggest taking a look at the docs for the CSSPlugin. That should give you quite a bit of information, but isn't a complete list. Most CSS properties will work along with the special ones Jack has created for GSAP. http://greensock.com/docs/#/HTML5/Plugins/CSSPlugin/ We also had a similar question in this thread which might be useful to you: http://greensock.com/forums/topic/14536-in-the-vars-object-of-fromto-is-there-a-list-of-html-properties/ Hopefully that helps a bit. Happy tweening.

Hi mikemms Welcome to the GreenSock forums. Rather than use the SVG clip-path on an HTML element, why not drop the image into the SVG? You can use the SVG <image> element and place your .jpg right in there and it will scale nicely. You have to remember to set a width and height or it won't render. I've made a fork of your pen to show this solution: http://codepen.io/PointC/pen/Gqzoja/ That should work in Chrome and FF. Edge and IE are another story. Oddly, the text in the clip-path wasn't moving in Edge or IE, but I've used clip-paths with them before and everything has been fine so I was a bit puzzled. The only difference being that this is text and I had always used shapes. I tried putting a rectangle in the clip-path along with the text and for some reason, IE and Edge work fine. The rectangle in the clip-path has no width or height, but without it, the text won't animate in the MS browsers. I left the rectangle in the pen with some comments so you can see what I mean. I can't explain this behavior. Hopefully this helps a little bit. Happy tweening.

Hi Caroline_Portugal I think the simplest thing here would be to kill() the old timeline and create a new one on your window resize event. Here's a fork of your fork of Carl's pen. http://codepen.io/PointC/pen/zBybXz/ Hopefully that helps a bit. Happy tweening.

Have you tried using x instead of left so you can take advantage of sub-pixel rendering?

Hi iProov Welcome to the GreenSock forums. I'm not sure I completely understand your question. Are you asking about the best way to check if a tween is running and prevent any events while it's active? The isActive() method (which you have in your function) is made for that. You don't have to check if the tween is active on every tick. You can simply check if it's active when your click event happens. If it is active, you can then prevent anything else from happening. GreenSock has a nice demo here: http://codepen.io/GreenSock/pen/Pwzomo More info about the isActive() method: http://greensock.com/docs/#/HTML5/Animation/TweenMax/isActive/ Hopefully that helps a little bit. Happy tweening and welcome aboard.

Yep - I missed this follow up question. I'm with Carl - I'm not sure I completely understand what you're describing. If we can get a look at your onDrag function, I'm sure we can point you in the right direction. Please let us know when you have a CodePen available. Thanks.

I have NVIDIA cards in both of my test machines.

I'm seeing the jump on both Win 10 Edge and Win 7 IE 11. All other browsers on both machines are fine.

Hi zonf Welcome to the GreenSock forums. Diaco (one of our moderators) has a cool pen that demonstrates controlling video with Draggable. It can probably give you some ideas. http://codepen.io/MAW/pen/JXXMaB/ Hopefully that gets you started. Happy tweening.

GSAP only animates numeric properties. It doesn't do any of the rendering so I don't see how this could be caused by the platform. It sure looks like a graphics card/driver problem to me. Happy tweening.

We recently had the same cloud animation discussion over here: http://greensock.com/forums/topic/14818-infinitely-repeating-svg-clouds/ Hopefully that helps. Happy tweening.

Hi redrooster I don't see anything in the code that seems like it shouldn't work, but I don't know if you've played the timeline before trying to reverse it. When you reverse a timeline and don't tell it the time from which it should reverse, it will start the reverse from the current playhead position. If you haven't played anything yet, the playhead is at the beginning and won't reverse.You can fix that by changing your last line to this: master.reverse(0); That will start the playback from the end of the timeline. More info about reverse: http://greensock.com/docs/#/HTML5/Sequencing/TimelineMax/reverse/ That's the only thing that stands out to me. It's always best to prepare a CodePen for these questions so we can get you the best answers. Please follow this link to see how to create one. http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/ Hopefully that helps. Happy tweening.

Hi AnimaChambers You are correct. You can add that tween to the timeline and use the position parameter to change its start time. In your case, it looks like you want the fade-out tween to start 1.5 seconds after the SplitText animation begins so you'd write it like this: tl.to("#quote", 2, {autoAlpha:0, y:0, ease:Power1.easeIn}, 1.5); To learn more, I'd recommend taking a look at Carl's blog post about the position parameter: http://greensock.com/position-parameter Happy tweening.

You read my mind Carl. I immediately thought of timeScale() as a possible solution. http://codepen.io/PointC/pen/grBZRN/

Hi celopez16 Welcome to the GreenSock forums. Draggable's getDirection() method can take care of that for you: http://greensock.com/docs/#/HTML5/GSAP/Utils/Draggable/getDirection/ Happy tweening.

Hi kahn Welcome to the GreenSock forums. To reverse the timeline when the mouse leaves the SVG you can add the following: $('.st0').mouseleave(function(){tl.reverse();}); Hopefully that helps. Happy tweening.

Hi KarenHuang Welcome to the GreenSock forums. I really like Blake's solution for you and it is the most elegant approach. That being said, you mentioned not understanding the syntax so it may be a bit confusing. With that in mind, I made more simplified solution for you. I took your two timelines and added them to a master timeline. I added a label to your main timeline that serves as the stopping point on the reverse animation. You can then play the main timeline from start to finish, play it in reverse to the stopping label and then play the last two letters as their own timeline animation. This is more of the manual 'brute force' approach, but may be a bit easier to understand: http://codepen.io/PointC/pen/OXoAKk/ Blake has provided great comments and links in his solution and I encourage you to read through everything and follow his links. Since you're just getting started, I'd also recommend some additional reading and learning. http://greensock.com/get-started-js http://greensock.com/jump-start-js The GreenSock JumpStart Collection on CodePen: http://codepen.io/collection/ifybJ/ Hopefully that gets you started. Happy tweening and welcome aboard. PS When using SVG text, you'll want to animate the fill:"#FF0000" instead of color:"#FF0000"

Hi ricnunes Welcome to the GreenSock forums. If I understand your question correctly, I think Blake's Spring Connections pen can guide you in the right direction: http://codepen.io/osublake/pen/vKdGAy/ That pen is using the new ModifiersPlugin. If you haven't seen it yet, here's some more reading about it: http://greensock.com/docs/#/HTML5/Plugins/ModifiersPlugin/ Hopefully that helps a little bit. Happy tweening.

Hi dmaller Welcome to the GreenSock forums and thanks for becoming a Club Member. For separate hovers like that, you'll want to use jQuery's each method. Each element gets its own timeline and you can hover over/out without triggering the others. Here's a fork of your pen with that solution: http://codepen.io/PointC/pen/yJqQqj/ Some more reading about each() https://api.jquery.com/each/ Hopefully that helps. Happy tweening and welcome aboard.

Hi vaarellano Welcome to the GreenSock forums. The problem with the animation not looking smooth is that you're not really animating anything. You're showing and hiding 3 different 'poses' of the same SVG which is really no different than a 3 image spritesheet. If you want your animation to work like the dribble example, you'll need to do a few things. I'd recommend some clean up and re-grouping of your SVG. You'll need a few groups with IDs or classes so you can control them. I'd say you'd want one for the upper body, one for lower body and one for the shoulder/arm/axe. The shoulder and arm group should be a child of the upper body group. You can then rotate it independently around a point in the middle of the shoulder joint and it will also go along for the ride with the upper body movement. You could also put the axe in its own group so that could also be independently rotated, but I think just following the arm rotation should get you pretty close. After you've got the SVG ready, it would be a matter of finding the correct origin point and setting your rotation animations. For the 'whoosh' semi-circle, you could use a mask to reveal that. I did something similar with my Movie Countdown pen: http://codepen.io/PointC/pen/jqaKYL I used the DrawSVG plugin for that pen, which is a Club GreenSock perk. You can try it on CodePen, but to use it in your projects, you would need a membership. I probably wouldn't worry too much about that semi-circle right now. It sounds like you're just getting started with GSAP so I'd recommend focusing on the SVG rotation animations. After you're happy with those, you could revisit the semi-circle animation reveal. Hopefully that gets your started. Happy tweening and welcome aboard.

Hi marcode777 Welcome to the GreenSock forums. I'm glad to hear that you're enjoying the platform. To make your element repeat again, you can change line 32 to the following: $('.btn').click( function(){ Anim.play(0) }) ; That will play from the beginning each time you click. To rotate in place, I'd recommend putting your text into an absolutely positioned div and rotate that. Right now you're rotating a <p> tag which is a block level element. That's why the rotation circle is so big. To see what I mean, try temporarily setting a background color on your .w class and then watch it rotate. If you create a little div to hold your "To Do List" text and rotate that, it should work fine for you. Hopefully that helps. Happy tweening and welcome aboard.

Hi Visual-Q According to the docs, the ModifiersPlugin is not included with TweenMax so you'll need to load it separately. http://greensock.com/docs/#/HTML5/Plugins/ModifiersPlugin/ Happy tweening.

Hey celli I think you could just use the invalidate() method and only one timeline like this: var tl1 = new TimelineMax({onComplete:function(){tl1.invalidate().restart();}}) Hopefully that helps.