PointC

Hi Cupracing Welcome to the forums. For the best help, we would love to see your code. Could you create a CodePen for us? Please follow this link to learn more about that. http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/ Regarding sliders, check these out for inspiration and learning - Diaco has some cool demos: http://codepen.io/MAW/pen/XmozON http://codepen.io/MAW/pen/yYradO Blake has a really nice example here: http://codepen.io/osublake/pen/ZbdxRx/ Happy tweening and welcome aboard.

Hi Rojan Wecome to the GreenSock forums. Carl has a great answer for you and I was coming to the same conclusion as he was posting. Everything looks like it's working correctly to me. To add my two cents worth, I think this type of timeline is an excellent argument for adding labels. With all those negative offsets, it's easy to get lost in the woods pretty quickly. By using labels and tweening relative to those labels, it becomes easier to handle. tl.add("playCircles") // add label tl.to( element1 , 1, {...} ),"playCircles") // start at the playCircles label tl.to( element2 , 1, {...} ),"playCircles+=0.5"); // starts 0.5 seconds after the playCircles label // Having tweens relative to a label also makes it easy to change all of them at once // since they're relative to the label. // You can add the label relative to other tweens in the timeline like this: tl.add("playCircles","+=2") Hopefully that would make things a bit easier. I'd also recommend Carl's terrific video about the position parameter: http://greensock.com/position-parameter Happy tweening and welcome aboard.

Hi mattVo Welcome to the forums. This can work for you with a couple of small changes. 1. You have the x position of the red box wiggling back and forth by 3 pixels which is fine, but then you're asking it to move 500 pixels on the x on the other timeline. This causes a fight for control. The simple solution here is to wrap the red box inside a container and then move the container along the x by 500px. 2. On your master timeline, you were trying to move the red1 variable by 500px, but red1 is a timeline not the red box itself. I've forked your pen and made those changes: http://codepen.io/PointC/pen/GZyWJx?editors=1010 Hopefully that gets you closer to what you wanted. Happy tweening and welcome aboard.

Hi Derikoe Welcome to the forums. Just to add a bit to Shaun's advice - if you're trying to avoid jQuery, this website is worth bookmarking: http://youmightnotneedjquery.com/ Happy tweening and welcome aboard.

Hi deb Welcome to the forums. If you want a simple bouncing ball that never ends, a repeating timeline is all you need. Something like this: var tl = new TimelineMax({repeat:-1}); tl.to("#ball", .10, {transformOrigin: "50% 100%", scaleY:0.25, yoyo:true, repeat:1}) .to("#ball", .75, {y:-400, ease:Circ.easeOut, yoyo:true, repeat:1}); http://codepen.io/PointC/pen/MyrbVr/ Hopefully that helps a bit. Happy tweening and welcome aboard.

Thanks Blake. I have a lot of fun and learn so much around here - it's truly an honor to be included with you guys on the moderating team.

That is really strange. From the video, I see what everyone is talking about, but I don't see any of that on the OP's pen or Blake's. I just tested in Chrome 49 Win10 and it's perfectly smooth for me. I refreshed a dozen times and didn't see a single twitch.

Hi ElliotGeno You're close with the transformOrigin. Just don't forget the x/yPercent. Add this line and I think you'll get the results you want. TweenLite.set(".fly", {xPercent:-50, yPercent:-50, transformOrigin:"center"}); http://codepen.io/PointC/pen/XdVWoJ/ Hopefully that helps a bit.

I'll echo what Shaun, Carl and Rodrigo said. I tried almost everything - 32/64bit, Win7/10, Edge, FF and Chrome. All looked fine to me.

Hi venn Yep - Blake is right - GSAP is going to be able to do what you need and it's going to blow the doors off CSS animations. You have to remember that GreenSock is animating numeric values. It doesn't care whether you use SVG, canvas or plain old divs. It can handle your animation needs. I took a look at the link to the CSS Tricks demo you provided. (which isn't working correctly for me in FF for some reason) That color reverse should be pretty straightforward. My opinion - inverting the fill color of text like that looks like a perfect use case for SVG masks. You can then activate it via a scroll, click or whatever user interaction you like. I put together a little demo for you. I thought the easiest approach was to create a duplicate text node that is revealed by the mask. I threw in some color change swatches for you as well. Please take a look as I think it can give you some ideas. http://codepen.io/PointC/pen/pydXLG Hopefully that helps a little bit. Happy tweening.

That's really cool Carl. I'm gonna have to remember that one. It could come in quite handy.

I think the answer to most of your "Is this possible?" questions is going to be yes. GreenSock is capable of quite a bit and with some creative coding you can achieve just about anything you can imagine. Have you tried some of these mask animations? The best way to learn is to just start trying some of these things you're asking about. If you have a specific GSAP related problem with a project right now, a reduced case CodePen demo would be most helpful in getting answers for you. Please follow this link to see about creating one. http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/ Thanks.

Yep - you can mask an SVG group and move the mask over it. GSAP isn't making the colors in the shape transparent - the mask is just hiding and revealing the underlying group in the SVG. Here is the world's simplest SVG mask demo to show you how it works. http://codepen.io/PointC/pen/KzmXYK Happy masking.

Thanks again for the recommendation Blake. The IK information is also the most interesting to me. I do a lot of puppet work in After Effects and a fair amount of IK/FK work in Cinema 4D so learning to make those types of animations for the browser is quite intriguing to me.

Carl points out one of the best parts of CSS vs GreenSock - making rapid changes and additions is so much easier with GSAP. I'd also like to encourage you to stick with GreenSock. After you practice for a bit, everything will start to make sense and you'll never want to touch a CSS animation again. Then you'll dive deeper into really fun stuff like animating timeScale() and building nested timelines with functions. It's funny - I first started using GSAP because I found CSS animations cumbersome and they look like gibberish to me. Making changes just frustrated the heck out of me too. You couldn't pay me enough to use any CSS animations now. You're doing great - keep it up. The forum mods and members are more than happy to assist you with all your questions as you continue your journey into the wonderful world of GreenSock. Happy tweening.

Hi marlonmarcello Welcome to the forums. I'm not 100% sure what you mean, but everything looks like it's working fine to me. Are you thinking that xPercent is referring to the screen width/position? When using xPercent and yPercent, you're referring to the element itself not the window width/height. In your example, the box is 50px wide so moving it xPercent:-100 is moving it 50px. You'd want to use x/yPercent to center your element and then regular x and y transforms to position that element where you want it. Please take a look at this blog post which has a lot of details and some great examples of xPercent and yPercent: http://greensock.com/gsap-1-13-1 Hopefuly that helps a bit. Happy tweening and welcome aboard.

Ha! Made you look! Have a great weekend everybody.

I took a look at this too. The original pen is smooth for me in IE11, Edge, & Firefox, but choppy in Chrome. Carl's fork with an image instead of a background-image is perfectly smooth for me in all browsers.

Hi phillip_vale If you set your timeline to reversed, it should work for you. var menu = new TimelineMax({reversed:true}) Hopefully that helps a bit. Happy tweening.

Hey Pedro I just got my copy yesterday and went through the first few chapters last night. It's nice having the Trigonometry chapters in there for a refresher as it's been some time since I've used a lot of it. I flipped through the later chapters as well and it all looks like a lot of fun. Tons of awesome information. I'm glad Blake recommended it, but now I know his secret. He may not actually be an AI from the Matrix, but just a human that's really good at math.

Very nice Carl. You've got the rocket here and the 'planes with parachutes' solution on another thread. If somebody asks about ships or tanks, you'll have a whole military collection happening here.

Hi thirdknife Welcome to the forums. Yep - Shaun is putting you on the right track with easing. In addition to the Ease Visualizer he linked to, you can take a look at these resources I've just made a new GreenSock Easing Playground you can try: http://codepen.io/PointC/full/RaVEpP/ Blake has a Cubic-Bezier Easing CodePen: http://codepen.io/osublake/pen/OyPGEo/ This is the forum post that goes with it: http://greensock.com/forums/topic/7952-javascript-custom-ease/?p=51357 In addition to easing you can gain a lot of control by animating the timescale too. You could start extremely slow and then really ramp it up as the rocket gains altitude. Check out the docs about timeScale(): http://greensock.com/docs/#/HTML5/GSAP/TweenMax/timeScale/ Here's a great GreenSock CodePen showing timeScale() animation in action: http://codepen.io/GreenSock/pen/LuIJj/ Hopefully that helps a bit. Happy tweening and welcome aboard.

Hi Sophia Welcome to the forums. Just to add my 2 cents worth to Blake's great answer. In your example, it sounds like you're expecting x to always be at 100 when the timeline progress is at 50%. You have to remember that the only time that would be true would be with a Linear.easeNone applied to the tween. Easing will make a big difference in the x position when the timeline progress is at 50%. Happy tweening.

Diaco makes a cooler solution again - very nice. @2474 I was only giving you the drawSVG info. Diaco has provided a more complete solution so please just follow his pen - that's how it should really be done. Happy tweening.

Hi 2474 Welcome to the forums. It looks like you're trying to tween from the end 2% of the path to the beginning 2%. The drawSVG plugin describes the end state - not the values between. From the docs: Remember, the drawSVG value doesn't describe the values between which you want to animate - it describes the end state to which you're animating (or the beginning if you're using a from() tween). So TweenLite.to("#path", 1, {drawSVG:"20% 80%"}) animates it from wherever the stroke is currently to a state where the stroke exists between the 20% and 80% positions along the path. It does NOT animate it from 20% to 80% over the course of the tween. This is a GOOD thing because it gives you much more flexibility. You're not limited to starting out at a single point along the path and animating in one direction only. You control the whole segment (starting and ending positions). So you could even animate a dash from one end of the path to the other, never changing size, like TweenLite.fromTo("#path", 1, {drawSVG:"0 5%"}, {drawSVG:"95% 100%"}); // you currently have your raindrop variable like this var raindrop = { start: "100% 98%", end: "98% 0", } // if you switch it to this, I think you'll get the effect you're looking for var raindrop = { start: "98% 100%", end: "0% 2%", } // you could also do something like this to start from nothing and grow the size as it falls var raindrop = { start: "100% 100%", end: "0% 10%", } Hopefully that helps a bit. Happy tweening.