Leaderboard

Hi @jesper.landberg Nice use of mix-blend-mode! It looks like @Sahil might have got you going in the right direction. The thing to understand about the canvas context is that it's more of a graphics API, so there really aren't any built in objects to animate. Whatever properties you want to animate, just make an object with those properties, and animate that object. One thing to be careful about when using lerp is that it might result in a lot of unnecessary, tiny calculations (see Zeno's paradox of motion). The paradox is that you can never move to a goal because it requires an infinite number of steps. Computers do have limits, so that's technically not possible, but it's usually a good idea to only lerp when the difference between the values is large enough to be noticed. So something like this. var dx = mouseX - circle.lastX; // Only lerp when the difference is greater than 0.01 // Could be any threshold, but something in the range of 0.01 to 1e-6 // should work fine for what you're doing if (Math.abs(dx) > 0.01) { circle.lastX += dx * 0.25; } else { circle.lastX = mouseX; } For more info about animating canvas with GSAP, here are some threads worth checking out.

Yeah, CSS and WAAPI cannot use JS based eases. You might be able to get close to some of GSAP's eases using these values. easeOutCubic = cubic-bezier(.215,.61,.355,1) easeInOutCubic = cubic-bezier(.645,.045,.355,1) easeInCirc = cubic-bezier(.6,.04,.98,.335) easeOutCirc = cubic-bezier(.075,.82,.165,1) easeInOutCirc' = cubic-bezier(.785,.135,.15,.86) easeInExpo' = cubic-bezier(.95,.05,.795,.035) easeOutExpo = cubic-bezier(.19,1,.22,1) easeInOutExpo = cubic-bezier(1,0,0,1) easeInQuad = cubic-bezier(.55,.085,.68,.53) easeOutQuad = cubic-bezier(.25,.46,.45,.94) easeInOutQuad = cubic-bezier(.455,.03,.515,.955) easeInQuart = cubic-bezier(.895,.03,.685,.22) easeOutQuart = cubic-bezier(.165,.84,.44,1) easeInOutQuart = cubic-bezier(.77,0,.175,1) easeInQuint = cubic-bezier(.755,.05,.855,.06) easeOutQuint = cubic-bezier(.23,1,.32,1) easeInOutQuint = cubic-bezier(.86,0,.07,1) easeInSine = 'cubic-bezier(.47,0,.745,.715) easeOutSine = cubic-bezier(.39,.575,.565,1) easeInOutSine = cubic-bezier(.445,.05,.55,.95) easeInBack = cubic-bezier(.6,-.28,.735,.045) easeOutBack = cubic-bezier(.175, .885,.32,1.275) easeInOutBack = cubic-bezier(.68,-.55,.265,1.55) Some eases, like bounce, can't be done with a cubic-bezier. And some of those names are different in GSAP. Quad = Power1 Cubic = Power2 Quart = Power3 Quint = Power4

TweenLite.ticker.fps(60); Isn't just for tweens its for the global ticker which controls the refresh rate for everything (tweens and timelines) TweenLite.ticker is basically the "heartbeat" of the entire engine. Everything is synchronized with those ticks and will refresh at the given fps. Set it to 50 and you are good to go.

Twooooo! edit / carl / you gotta click it

Your question is very similar to this one. They are using SVG, but that is irrelevant. Look at how I'm calculating the duration based on the distance between the points. The individual tweens use a linear ease. I then animate the progress of the timeline using a tween with a Power1.easeOut ease. That ease could be whatever.

Aha! Great catch. Sorry about that. Okay, it has to do with the complexities in measuring angles that cross thresholds (like 179.9 degrees to -179.9 degrees is literally just 0.2 degrees apart functionally, but mathematically they're 359.8 degrees apart). Draggable has code in place to handle that, but you ran into a very particular case with bounds where it glitched. That should be fixed in the upcoming release which you can preview (uncompressed) at https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/Draggable-latest-beta.js Better?

Yeah, one of the worst things about CSS/WAAPI is the very limited easing options. You simply CAN'T do a lot of the expressive eases (as Blake indicated). However, you can try to get close by using our ease visualizer. Just select the ease you want to emulate, then toggle over to "Custom" and make sure you have NO anchor points (CSS can only do a single cubic-bezier segment), and drag the control points on the very end (the handles) to best mimic the original ease curve. Again, most of them you won't be able to match. Then, in the bottom where the code is, you'll see the custom ease data. The string you want will look kinda like "M0,0,C0.116,0.676,0.532,1,1,1". Ignore everything before the "C" and the last two numbers ("1,1"). Plug them into the cubic-bezier and you're done. So, for example: //before... "M0,0,C0.116,0.676,0.532,1,1,1" //after... "cubic-bezier(0.116,0.676,0.532,1)" I hope that helps. Of course it makes me sad that you're forced to use CSS instead of GSAP Good luck with the project.

I don't see where you did that. Whenever you want to make changes to a demo you're asking a question about, please create a fork, and post the fork so we can see the incremental changes. It helps avoid a lot of confusion. To avoid jitter on mousemove, make sure you're throttling those events. Setting will-change: transform in your CSS might also help, but that introduces another set of problems. https://greensock.com/will-change I just quickly made a fork of your demo with those changes, and it seems to reduce the jitter a lot. I'm sure the onMove could be improved some more, but I'm really not 100% sure what you're trying to do.

Hi @AbhishekSock The secret to making responsive animations is to stop trying to make them responsive. It's very hard to do, and requires careful programming. So stop worrying about the responsive part. There are plenty of ways to deal with a change in screen size, like rebuilding your animation. Using FLIP animations Or change the positioning before and after an animation. This demo uses Draggable, but it's the same concept you could use for an animation. Once you start dragging a splitter pane, it converts its position to absolute, and when you stop dragging, it converts its position to relative/responsive units.

That's because default ease of GSAP is Power1.easeOut, you can set default ease globally or you can change it on each tween if you like. TweenLite.defaultEase = Linear.easeNone;

Since you asked. Scale is a transform, and that can be really confusing if you've never messed with raw transforms before. GSAP makes transforms seem super easy, but they aren't... not by any stretch of the imagination. Canvas transforms work just like SVG transforms, and use the same matrix. In canvas, there is no transform origin which can make transforms seem even more confusing. SVG really doesn't have a transform origin either. CSS adds one, but it doesn't work the same in every browser, so GSAP has to calculate it for you. With canvas, you can call transformation methods, like ctx.translate(), ctx.scale(), and ctx.rotate(). Or you can set the transformation matrix in 1-shot by calling ctx.setTransfrom(). For this post I'm going to use setTransform to set the matrix. An identity matrix, a matrix with no transforms, will look like this. ctx.setTransform(1, 0, 0, 1, 0, 0) To understand how those values are calculated is beyond the scope of this post, but as long as rotation isn't involved, you could look at the matrix as looking like this. ctx.setTransform(scaleX, 0, 0, scaleY, x, y) And to get around calculating the transform origin for your circle, you can just draw it centered at 0,0. So here's your demo animating scale instead of radius. I'm using Path2D because it's easier... and fun, but it won't work in IE. Google does have a polyfill for it, but it doesn't work good. One of these days I should just write my own polyfill.

It's always fun to lead the reader on, validating their opinions, and then pull a 180 on them! I should find a pro-WAAPI place to post that on. For even more fun, check out this tweet. https://twitter.com/shshaw/status/941767533610323968

I'm not sure that'd help, Blake, because typically screens run at 60hz anyway, so even if setTimeout() was used it's not really gonna look much different. Frankly, my plan is to remove support for useFrames in GSAP 2.0.0 because it's so infrequently used and I don't think it merits the kb. So it'll always be in 1.x, but I would encourage folks not to start depending on it too much for future versions. Like I said, almost nobody uses it (from what I can tell). If I hear from a lot of people that they need/want it, I'll certainly reconsider.

Hello @Tasty Sites Here are 2 other ways of doing a typewriter effect in GSAP: This animates CSS width using steppedEase And this animates CSS opacity (autoAlpha) using steppedEase: Happy Tweening

As seen in my second GSAP vs WAAPI demo, it's better to let GSAP deal with the jank. Animators want consistent handling of jank first and foremost.

That would be nice, but is probably something CodePen has no control over. CodePen is just searching cdnjs, but it doesn't bring up results for different files within a library, like Draggable. At one point in time, cdnjs allowed for a "latest" version, but they've discontinued that. If you try to use that format, it will serve you v1.18.0. https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js

Hehe. I can appreciate not wanting to get involved with a spec as it's the equivalent of dealing with the government. It takes 10 years to come up with something, and the end result looks nothing like what you originally proposed. I need to do some more investigating, but it seems like a worklet for doing purely JS-driven animations could be possible. The current draft for the animation worklet describes something close to that, but is designed to work with a WAAPI/CSS timeline. Here's the message that led to what is now the animation worklet, and some of the problems with running animations on a different thread. https://lists.w3.org/Archives/Public/public-houdini/2015Mar/0020.html

I'm going to post more stuff about Houdini, but the reason I'm doing this is to be a little proactive so what we don't have to wait until mid-2019. Features get added based on popularity, so the word needs to get out. But more importantly, you can use your influence as the author of a popular animation library to help shape Houdini. For example, one problem I see in the future is that requestAnimationFrame is capped at 60fps, and there are no plans to change that because it will break some existing sites. This means that JavaScript animations will only be able to run at 60fps regardless of the user's display, while CSS animations will be able to match any refresh rate, so 120fps+. And then you have WebVR, which is supposed to run at 90fps. So JS needs a timing mechanism than runs faster than rAF, which might be possible with the help of worklet. I don't know what that might look like, but it should definitely be explored.

Every time I hear somebody talk about burning witches, I always think of this scene from Monty Python.

No biggie. You weren't here when this question originally was asked, but welcome back buddy!

Hi @hanslibuzli Hmm, there's another simpler way; pls check this out : var zoom = 2; TweenMax.to('.outer',1,{scale:zoom,onUpdate:function(){ TweenLite.set('.inner',{z:0.2,scale:1/this.target[0]._gsTransform.scaleX}); } ,repeat:-1,yoyo:true })

Sure thing. Due to the nature of Beziers, plotting the progression of an object on the path over time can make it appear to speed up or slow down based on the placement of the control points and the length of each successive segment on the path, so BezierPlugin implements a technique that reduces or eliminates that variance, but it involves breaking the segments down into a certain number of pieces which is what timeResolution controls. The greater the number, the more accurate the time remapping but there is a processing price to pay for greater precision. The default value of 6 is typically fine, but if you notice slight pace changes on the path you can increase the timeResolution value. Or, if you want to prioritize speed you could reduce the number. If you use a timeResolution value of 0, no length measurements will take place internally which delivers maximum processing speed, but you may notice changes in speed during the animation. Does that clear things up, @OSUblake? Good question.

You might want to check and see if there is a way to disable animations, or at least some of them. In Angular material, there is way to disable animations, allowing you to provide your own with a little work. I realize that you're using completely different, but there might be a similar option. Just a thought.

50fps seems like a weird number, like with old analog signals and PAL. Are you in Europe? To be honest, I have never dealt with using frames, nor have I seen any questions on this forum (html5/js) about using frames, so that is something that @GreenSock or @Carl would probably have to answer. So I'm not 100% sure about the update frequency, but if you set the timeScale like that, then the playback speed will be probably be more like 50fps. If that's what you're going after, then setting the globalTimeScale might be a better option.

Hi @silid You can't set the frame rate for a timeline, just for a ticker. There is a way you could manually update a timeline at 50fps, but that requires some work. Can you make a demo of what you're trying to do? There might be a better way to do the conversion.

@GreenSock I had hard time reproducing this issue because I was using 1.20.2. The try club plugins demo also still points to libraries older by version or two. So my question is, is it possible for you to request Codepen to make all GSAP files available via their new search feature?

Hey, It appears to be fixed using the draggable-beta! Thank you all for the quick support!

Sure. Here's a variation that creates 5 different timelines for each circle, which should be running at different speeds.

Thank You! missed you all.

Ya that's the reason, though I don't know what you are trying to do exactly. Why are you going through all the trouble of scaling parent/child at the same time? From the demo it seems unnecessary unless your final implementation has some use of it, it will be great if you post your final demo or explain why you are trying to scale elements.

Ya it would be better to start new thread if your problem isn't related to what was originally posted. Also, it would be great if you post a demo. As for your question, you can't simultaneously use set and to on same element's same properties. I mean you can use it but it will have some unexpected behaviors for sure. In first example you can see that, I am animating x for 3 seconds. But within a second I am setting a tween and animating same property. Which takes over any ongoing tween for that property. On next line there is another tween that animates element back to zero. You can comment out either line and you can see that any new tween will overtake ongoing tween. In second example I am using overwrite property of tween and setting it to false. Here you can see that new tween takes over ongoing tween but as soon as new tween is finished, animation goes back to where it should have been in first tween. In some cases this can be really useful. Hope that clears up your doubts, otherwise create new thread.

Diaco beat me to it Anyways, here's what I came up with: Edit: movement triggers when hovering. Edit2: Made the flow feel more natural. Added a slight rotation to see it from the side. If you want to see it from the top, just remove the rotation from the stage class.

Hi @DD77 pls check these out : and the second one: are these what you looking for?

Three!!

Not sure what happened to demo I posted, it was working while I was editing it. Anyway, you can do it like this and save yourself from all the calculation.

Hi @geddski At first, for the Club GreenSock bonus plugins on Codepen; you can find the codepen safe versions here: https://codepen.io/GreenSock/pen/OPqpRJ And about your issue; pls try to wrap your spacing entities with a span tag. <span>&nbsp;&nbsp;.....</span> Splittext completely respects to <br> tags. btw, you can use "&emsp;" instead of "&nbsp;"

Four! (For @Sahil)

Check out this demo from @OSUblake I think it will be a great foundation for this effect

It was mostly due to CSS, this should solve the issue.

What you were doing with progress was creative, but the very tiny issue with that is your elements disappear once animation completes. For that you can wrap elements by using Modifiers plugin. You can read about wrapping function here https://greensock.com/forums/topic/15737-modifiersplugin-helper-functions/ and check docs for ModifiersPlugin, it basically lets you modify values before actually applying them. I know this might seem more complex to you than what you had done but if you care about those tiny details you can take this approach. Another thing is, you were using really old version of TweenMax, cdnjs has dropped support for 'latest' links so it is actually old version. Finally, I am not sure if your approach of explicitly calculating boxsize by multiplying with 2 is correct but I have very little experience with SVGs so you know better or someone else might point out. As for timeline, timeline is sequential so it will run each tween after another so you can't really use it in this scenario. You can add all tweens in timeline with position parameter 0 which will make them start at same time but you won't be able to take advantage of your progress approach. I often see people use timelines and add tweens to it on hover effect, and they start wondering why animation doesn't stop. That happens because timeline is going to play every single tween added to it. Also timeline just acts as container, so if you create 10 tweens and add it to timeline, you are still creating same amount of tweens. Just timeline makes it easier for you to manage your animation. Hope that clears your doubts, though feel free to ask if you have any questions.

Going to attempt to answer, though wait for Blake's response. Actually context is very different, and to animate anything you will have to do it all on your own. Like in this case you will have to animate radius of circle. GSAP animates any properties of any object as long as they are numeric, so you can create objects and animate them externally.

Hi DD77 I've seen literally a dozen or more posts about this pen you forked from GrayGhost Visuals which is a just a basic tutorial on using ScrollMagic. Sahil has gone above and beyond the call of duty in trying to explain how to get certain things accomplished with GSAP. It is not the purpose of these forums to spend hours helping with each new requirement a user has on a project, especially those requiring complex logic and re-wiring of animations that have already been fed into ScrollMagic. I've read this thread a few times and I personally do not know enough about ScrollMagic to solve your issue. The reality is there are a lot of users who need our help (which we offer for free) and we have to do our best to help people with issues related directly to the GSAP API, anything beyond that is a bonus. I hope you continue to enjoy using GSAP and wish you good luck with your project.

It was jumping because you weren't using e.preventDefault() and you can just scroll using scrollTo plugin. Reverting tween won't scroll your animation. As Jonathan said, I don't want to break any forum rules. Generally we don't provide such solutions and other forum members prefer to get questions with limited demo and specific problem. I don't want to go against the usual rules though I think I have helped you enough. All the best.

Hello @kaliel and Welcome to the GreenSock Forum! Keep in mind that when using SVG that it can only animate using 2D transforms natively. When SVG 2.0 comes out then SVG will be able to animate using 3D transforms and use hardware acceleration. You could always wrap each SVG element in a <div> tag and then take advantage of 3D transforms. But even at a certain point 3D transforms on hundreds of DOM elements will cause that jank (lost frames) your seeing now with SVG elements. So until then you would have to use Canvas / WebGL to get smooth animation with hundreds or thousands of elements. Happy Tweening!

I would first setup my layout using CSS only and make sure it is responsive. After that you can animate those blocks into their places using from tweens. Easier approach would be to use className to animate everything and keep it responsive. Another approach would be to use responsive tweens which will give you better performance. Following thread will give you some ideas about how to approach it. 1. You can use modifiers plugin if you are just animating 1 or 2 properties, otherwise it will get too complex. Though in those examples we are using tween.progress(), use tween.ratio instead which gives you ability to use easing effects. 2. You can use tween directly and track their progress on resize so you don't see any jumps. It is more useful when you are animating more than 2 properties, it will keep your code simple. Also note Blake's reply at the end which will keep your performance better. Following is another example by Blake that shows how you can use media queries in JavaScript.

Hello @AbhishekSock and welcome to the GreenSock Forum! When using GSAP for responsive animations its best to use the special properties xPercent and yPercent. Find out more here: https://greensock.com/gsap-1-13-1 And here in the CSSPlugin Docs: https://greensock.com/docs/Plugins/CSSPlugin Notes about transforms To do percentage-based translation use xPercent and yPercent (added in version 1.13.0) instead of x or y which are typically px-based. Why does GSAP have special properties just for percentage-based translation? Because it allows you to COMBINE them to accomplish useful tasks, like perhaps you want to build your own "world" where everything has its origin in the very center of the world and then you move things in a px-based fashion from there - you could set xPercent and yPercent to -50 and position:"absolute" so that everything starts with their centers in the same spot, and then use x and y to move them from there. If you set x or y to a percent-based value like 50%", GSAP will recognize that and funnel that value to xPercent or yPercent appropriately as a convenience. Our 1.13.1 Release Notes have some great demos showing how xPercent and yPercent can help with responsive layouts. You want to stay away from animating CSS properties like top, right, bottom, and left. Since those CSS position offset properties will not animate smooth and cause layout to be calculated on every render tick. Happy Tweening

@Dipscom Make sure there is explosion at some point in this count down.

@OSUblake .. I don't know lol, your talking about all this "magician" stuff and "magic of Styling and Layout". For shame.. we used to burn people at the stake for such talk, or dunk them in water and see if they float, cuz as we all know, magical witches don't float (nor do real people)

Here is how you can do it. _gsTransform object is attached by GSAP on any objects that it animates, it lets you access all transformation properties.

I'm also wondering what you're trying to do. In the post that PointC linked to, I mentioned promises, which might be a better option. A promise is a proxy for something in the future, and will let you compose stuff just like you described in this post. Look at how many times you used the word "then". Now look at the syntax to run a chain of promises. putYourRightFootIn() .then(putYourRightFootOut) .then(putYourRightFootIn) .then(shakeItAllAbout); You can add as many thens as you want. Whatever you return in a function will be passed into the next then call. Promise.resolve("Hello") .then(function(msg) { console.log(msg); // Hello return "World"; }) .then(function(msg) { console.log(msg); // World }) So how does it know when an animation has finished? It doesn't. If you add an animation to a then function, it will execute and go on to the next then. To make it wait until an animation is complete, you need to wrap it an a promise. When the animation is complete, call resolve, and it can move onto the next then. Promise.resolve() .then(function() { return new Promise(function(resolve) { TweenLite.to("#box1", 2, { x: 400, onComplete: resolve }); }); }) .then(function() { return new Promise(function(resolve) { TweenLite.to("#box1", 2, { x: 400, onComplete: resolve }); }); }) Here's a demo showing the difference between running animations with and without a promise. You could also create a function to wrap an animation for you. If you've done animations in Angular, React, or Vue, you might be familiar with creating animations that look like this. Once you call done, the element is removed from the DOM. function leave(element, done) { TweenLite.to(element, 1.5, { x: 400, autoAlpha: 0, scale: 0.5, onComplete: done }); } And here's how do that using promises. This can make your animation code very modular. I know a lot of people aren't familiar with promises, but they are really helpful once you get the hang of them. All modern browsers support them, and there are of tons of polyfills for IE and older browsers. http://caniuse.com/#feat=promises To polyfill older browsers, just include this script. It uses polyfill.io <script src="https://cdn.polyfill.io/v2/polyfill.js?features=Promise"></script>