Sahil

Ya it would be steep but if you spend some time around forum looking at questions even though they are not related to you, you will learn a lot. I gave it another try and I think this is what you are trying to do. Some of the things I would like to point out, 1. You are using files with 'latest' links but those files are 3-4 year old, latest version is 2.0.2. 2. The way you had written your code works but it is incorrect because spriteslider is your proxy element. So you shouldn't assign your actual elements as properties to it. 3. GSAP 2.0.2 was released yesterday with a new callback called onPressInit which lets you adjust your element before Draggable records your values, so I am using it to reposition the proxy element. But in above demo you will notice jumps when you mouse over at random position. You can animate to that position by using manual easing, it is little bit advanced but just basic Maths. Here instead of directly applying calculated progress, I am using another variable called spriteProgress. Then on every frame I am using that value to ease the tween for smoother effect.

You don't need to append your proxy element 'spriteslider' in the DOM. It can work without appending. Solution for your problem is pretty simple, create a tween with stepped ease that will animate through your spritesheet. While dragging set your tween's progress as draggable.x/containerWidth. On mouseleave you can reset the progress and on resize you can recalculate the containerWidth and reset everything back to zero. The main problem with your implementation was you were using mouseenter on 'spritetarget' and mouseleave on container. I had hard time editing it, I was going to give up but here it is.

It's hard to guess what you are doing without seeing your code. But I don't know why you are trying to uncomment autoplay lines when you are trying to make it autoplay. I would suggest following Blake's original demo from scratch, by typing everything line by line without copy pasting. It will help you understand what is happening, it is far easy to make changes when you understand what is happening. If you still couldn't make it work then create new thread and post your demo there.

You can trigger the draggable using startDrag method, you need to pass event data as parameter. It won't matter if the mouse is down or not. https://greensock.com/docs/Utilities/Draggable/startDrag()

You need to animate scaleX to zero and set transform origin to 'right center'. (same as '100% 50%')

I work alone too so I don't really have some special setup other than using functions to create timelines, what @GreenSock shared.

Ya I meant you can replace div tag with SVG tag. So you will need multiple SVG tags that will act as containers for sides of cubes.

Here is how you can do it so you won't have to pass parameters or even need callback.

That is fine, a little too much to type for me to use one variable. I would prefer to break into multiple objects to separate them in specific settings. But if it works for you and your team then there is no problem. Everybody prefers to declare their settings/variables differently.

If you mean 3D in SVG then no because only few browsers support 3D spec for SVG elements. You can use multiple SVG containers instead. Yes you can set them to auto-rotate, take a look at original demo by @OSUblake

1. On line 125 you were passing function to the timeline instead of executing it. Once you execute the function, it will return the timeline instead of function itself. In your case child timeline was never getting added to parent timeline. 2. When you reverse the animation, it just reverses nothing more. If GSAP tries to do anything else, it will just create same problems when you will try to create two separate timelines for play and reverse. 3. Safest way to approach this is, create two timelines. If user interrupts, then just reverse ongoing animation. If there is no active animation then use alternate reverse animation. Little punishment to user for interrupting. 4. @GreenSock can comment on that. Usually we avoid pens with hundreds of lines of code, I just gave it a try because you seemed frustrated in other thread. Hope this helps you.

You can post your code here, while editing you will notice there are buttons at the top of editor. 7th button lets you paste code, but avoid posting more than 30-40 lines. You can also use codepen or something else if you prefer, where we can see your code and edit it as well. The link @GreenSock posted shows you step by step guide about how you can use codepen to post your demo. So far it is not clear what your question is about, 1. Are you trying to animate HTML elements like Div etc? 2. Are you using canvas or any library like p5js? 3. Which course or tutorial you are studying using Khan Academy? So we can guess what you are actually trying to do.

Kind of, now there is CustomBounce plugin that does a lot more than simple config. https://greensock.com/docs/Easing/CustomBounce

Ya I guessed it. That's interesting, what are practical and common uses of Math.SQRT2 and SQRT1_2 that it is part of API? How would you go about normalizing the speed based on where you click? I gave it a quick try but my approach seems incomplete or hackish. EDIT: I guess you would suggest expoScaleEase, I will give it a try later.

My intentions weren't to discourage you from posting anymore questions, so don't hesitate. You can enable disable draggable entirely using those methods, but you can't disable certain methods. You will need to add conditional logic instead to avoid execution of certain code. But I am not sure why do you need it, It works just fine as it is. Are you using onDrag event instead of onDragStart? You don't need to do that. onDragStart fires only once and it fits perfectly with what you are doing.

It is not really GSAP vs Pixi JS. They work together. Pixi JS will render everything to canvas. GSAP will handle the animation for you. GSAP animates any numerical values of objects so it works with PIXI JS really well. Some of properties of Pixi JS are under multiple objects like, pixiObject.scale.x so pixiPlugin simplifies your syntax. https://greensock.com/docs/Plugins/PixiPlugin There are some other plugins that will make your life easier. https://greensock.com/docs/Plugins/DirectionalRotationPlugin https://greensock.com/docs/Plugins/Physics2DPlugin https://greensock.com/docs/Plugins/PhysicsPropsPlugin Here is basic example of how you can use GSAP to animate PIXI objects. If your confusion was if you should use HTML or Pixi JS then, Pixi JS is ideal for game development.

Here is basic demo of how you can do that effect. You need a fixed element that will cover all the page content. As for explanation, everything is pretty well documented there. http://barbajs.org/how-it-works.html

Well you will certainly get better performance compared to DOM elements because you would be writing minimal code that draws directly and skips any DOM API calls. If your game has a lot of effects or particles, PIXI JS might give you better performance because WebGL takes advantage of hardware accelaration. Otherwise canvas is your best option. If you really want to squeeze out performance then you can avoid rendering text on each frame and render text to offscreen canvas once to reuse it as image for far better performance because rendering text on canvas is expensive. In fact, you can do that for any complex shapes to avoid redrawing them and use sprites wherever possible. Check out following article, https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas And our discussion about canvas performance,

GSAP works with objects, so in order to animate multiple square you need to use objects. But better option would be to use prototype so you can have more flexibility, each object will have it's own draw method and other methods as well if you need. I am passing context to draw method so just in case you want to reuse your code or it gets too complex, you can easily separate your code to organize it better or create your own simple library to draw common shapes. Once you do that you can animate each square independently just like you animate DOM elements. Also, please avoid posting private pens as we can't fork them. In case you haven't already, I would recommend getting this book: https://www.apress.com/in/book/9781430236658

You can improve your animation performance and shorten your code. 1. You are trying animate height, which triggers layout recalculation. Instead you can scale the divs. 2. I am setting different transform origin for both divs, which determines in which direction they will shrink. 3. GSAP works really well with ScrollMagic, you can pass a timeline that contains multiple tweens instead of creating multiple scenes. 4. I am setting position parameter for both tweens to zero so they will start at the same time. 5. You were using old syntax by wrapping your css vars in css object, it is valid but no longer required so you can just pass your css var in object like I did. 6. When experimenting with ScrollMagic, turn on indicators so you get idea when your animations trigger. 7. Also, the class that you are using as trigger element is not present in your html. https://greensock.com/docs/Plugins/CSSPlugin https://greensock.com/docs/TimelineMax To learn more you can check the docs, learning page or visit the youtube channel to watch some handy tutorials. Feel free to post if you have any follow-up questions.

You can use MorphSVGPlugin to do that, it is part of club membership but you can use it to practice for free on Codepen. Check out the docs and following video. The docs are here: http://greensock.com/docs/#/HTML5/GSAP/Plugins/MorphSVGPlugin/pathDataToBezier/ There's a YouTube video explaining it here: Feel free to post any GSAP related questions, we don't have downvote button so nothing to worry.

As @GreenSock already had provided you solution, the only reason I posted that because you mentioned you wanted to recalculate values on resize. But svgs are scalable so resizing won't really change values unless you recalculate your paths manually so I thought you could just do same thing in canvas instead. But of course you know what fits in your requirements. Thanks. Just to clarify, canvas draws paths just like svg, just you have to do all the stuff manually. You can also support different pixel density, so raster etc isn't really an issue. Ya the Path2D is not supported by all browsers, but the pollyfill works in IE 9 as well without any significant performance issues. If you paste the url while in editor mode then it will get embedded.

Yup it is fun book to learn from, good to see you are enjoying it. I am not aware of any game development related book to recommend. @OSUblake can suggest for sure, he was the one who introduced me to that book. In the mean time take a look at following thread that might interest you. https://greensock.com/forums/topic/14033-looking-to-learn-more-about-physics/

Couple of days ago I was working on something out of personal interest. I didn't have any plans to post it in the forum, it was meant to be a PM to @GreenSock I haven't spent more than couple of hours on it so it is not complete and I haven't tested it for performance. Few days ago there was a question about using drawSVG for canvas, so I wrote little class as experiment that will do it. Today I saw your question and I modified it to support path modification. Bonus: You can use MorphSVG on it. Though all browsers don't support Path2D so you will need pollyfill for that. See if you can use it. Also, what I am doing is very little and I have too much freedom to do it, while GSAP is really big library and every change has to be considered for any side effects and if enough users need it.

Nice trick! The values that you are trying to apply are too small to see changes in Firefox. (At least that's what it seems like) Chrome is doing weird stuff, it doesn't render any changes. So I tried adding circle to svg and applied filter to it and it started working, only to stop when circle got out of the viewport. Then I set the svg's position to fixed and it worked. Maybe you can add tiny svg in background somewhere with fixed position and have it's opacity to 0 or stroke/fill same as background. Though not sure what is the reason for such behaviour.