Sahil

Well a pretty advanced demo if you are just getting started with animation and GSAP but for good reasons. The demo you posted uses HTML elements to create those stars and without any other content or animation it is struggling to run at 30FPS, now imagine using other animations on top of it and freezing your user's browsers. So it makes a lot of sense to use Canvas for it. I have left a lot of comments explaining almost every bit of the code that will explain all the math and tricks behind animation. You can reference docs for anything that you don't understand related to GSAP or google stuff related Canvas. But feel free to ask any questions. If you have done any canvas related animation there are many things worth noting in terms of performance. Like all paths are being drawn at once before they are painted on the canvas. It helps because all particles are of same color. If they were of different colors then it will take a lot more processing but I believe it will still easily animate 500 particles of different colors. For better performance, use a plain div tag with background image or gradient instead of trying to paint it on canvas. I know it is advanced demo and may not be what you expected though still give it a try and try to go through the code it. If you feel like you won't able to understand it, I have planned post a video tutorial in couple of days.

onUpdate gets called on every frame, I didn't find anything in docs that will limit the onUpdate calls. For integer, you can use roundProps property. Check the following demo. If you don't want to bother with creating additional variable etc, then you can use modifiers plugin. Though now you will have to round values yourself. But it is basically same thing, whether gsap does it or you do it.

@PointC what happens when someone holds candle in dark, in front of mirror and whispers canvas three times?

You made only one change from what I had suggested, and you changed all 'TweenLite' to 'Tweenlite'. Write TweenLite on line 19, 32, 47, 61. Correct the typo on line 86 as list.length

You had multiple mistakes, TweenLite was written as Tweenlite Both functions were defined as MoveToRight and typo in list.length as list.lenght Usually these errors can be debugged using developer console. Also, we prefer to get a reduced Codepen demo instead of live sites or git repos. It becomes time consuming to analyze code, reconstruct demos etc

Here is how you can do it. I have left some comments in the code but most of the math is self explanatory, you can learn these kind of animations using this book: http://lamberta.github.io/html5-animation For better performance you can use opaque canvas.

If I understand correctly, problem is you are missing target if text gets added while scrollTo is animating, right? You can get around that by recreating tween every time you add new text. Following thread had similar issue, it uses onUpdate call to tween using new target values but if you are not animating height(plus not really good idea for performance) of new text then just updating once should be enough.

I checked the demo from the github page and I don't see this behavior while opacity is being animated. My guess is, this library gives you option for that smooth movement after scroll finishes and you probably have used it for opacity or misconfigured somehow or using some callback which is causing this side effect.

Ya actually I tried dolly zoom last month after watching some video about dolly zoom in movies, it is not that easy to achieve, at least in 2D space. Not sure if I got it right, I may have to watch few more videos.

That website uses Pano2VR player and draggable on top of that to control the view. I think using draggable on top of it has to be easiest part and in forum you will find multiple examples of how to control some values using draggable. Pano2VR on the other hand will take some process of creating 3D views, 360 images etc. https://ggnome.com/pano2vr

@smallio plan is to make you fly, be it as superhero or as parrot.

It all started with this thread, that will give you some idea about entire effect. Carl has covered it in all details in latest video on GreenSock learning channel on YouTube. Blake might follow up with some more explanation, I am also curious about any alternate use cases for ExpoScaleEase.

Here is how you can do it, if you don't want decimal points there is line you can uncomment. Also noticed slight issue with logic in @Acccent's demo, numbers won't animate on first click if you click back and forth on both buttons.

@Visual-QIf you console log reversed state and progress in your second example, you will notice that your statement never executes because progress remains zero. You can get around this by setting reversed property on timeline to true, otherwise timeline will play in reverse for the first time. Note that unlike reversed method, reversed property doesn't reverse entire timeline.

@lisartur You haven't provided us enough information to help you with what kind of effect you are trying to achieve, neither there is any new information in your PM. The code I have posted can work with any images/svg elements/html elements, it doesn't matter if it is circle or rectangle. Also the way you have posted your images they don't look like they are rotating. You can fork my demo and post an updated demo with your html/svg/images. Though keep in mind that games are already complicated thing to do, so we can't really spend a lot of time to help you implement something complex. If you have prior experience with JavaScript and game development we can help you with how certain specific effects can be achieved with GSAP.

In your example you are calling reverse on timeline but timeline's playhead is already at zero so it will never do anything. You can overcome it by passing 1 as progress from which you want to reverse. A better approach is to assign timeline to a variable and use it to play or reverse, which I have done in my example below. You also don't need to use conditional statements while creating events, because you are writing your own project. It only makes sense to do so if you are writing a plugin or something. As for using functions to create timelines, it can be your personal preference but I think it makes more sense for complex animations or where more than 3-4 tweens are involved. Anything less than that just adds complexity to your code which can be written in fewer lines.

Here is very basic demo of how you can rotate elements on key press using GSAP. Right now they just rotate 90 degrees at a time but you can develop them into more complex behavior, it can be done using GSAP.

@bparticle Aren't you using exact code as Blake? It only reverses animation when you close the modal, I can't imagine how polygon gets mangled up. Maybe you need to check if modal exists then play animation otherwise create modal. You can remove points by writing poly.setAttribute('points', '');

@harp It will be nice if you make habit of posting codepen demos where we can check working code. It is too hard and time consuming to debug anything just by reading code.

@GreenSock Ya but I am trying to control myself. Don't worry I hope I have made your day again.

Have you tried console logging TweenLite? I haven't really seen any ruby on rails question here so can't suggest anything. But console logging the TweenLite will give you idea if it is being included in your project or not. If it does get logged then problem will be with your code and if not then problem will be with how you are including GSAP files in your app. As I said that we have never received any ruby on rails question so chances are slim that someone might be able to help you. Maybe give it a try on ruby on rails forum as well?

Thanks Craig. Ya I am trying spend less time on forum actually, can't decide yet if I should reduce down to an hour or take break for few weeks. But you should not take any breaks because my eyes are on leaderboard next two spots are target for sure. More people might try to catch up after my next post.

@OSUblake but that won't work for rectangular shapes right? It works. I was going to do something similar with 100x100 viewbox and looked for if viewbox can be stretched etc but didn't find anything so decided to not use viewbox. I didn't know polygon points can be animated like that. Thanks. Any similar trick for paths to avoid setAttribute? BTW have you decided to start answering in blog format? It does look great and more impactful.

@bparticleIt's not bad, it complicates things. And trust me, if you stick with GSAP then you will never feel the need to use jQuery animations. I was like you but I have simply forgotten jQuery, life is easier with less jQuery. But it is personal choice, if you prefer you can continue using jQuery animations with GSAP. And wait, @OSUblake is responding so he will have some better approach. BTW you are using svg element as modal then can't you reuse same element throughout the page? Just give it position and dimension of whatever element you are animating?

You can give Barba.js a try that works with simple HTML templates if you don't want to learn new framework, though at some point you will have to. Check the following thread that discusses Barba.js.