Sahil

Not a bug. You have two fromTo tweens which have immediateRender set to true by default. So when second fromTo executes, it immediately renders your path to that value. You can either set immediateRender to false or use a 'to tween'.

Just came across a tweet, couple of days ago p5js launched their web editor. So you won't really have to mess with Codepen. https://medium.com/processing-foundation/hello-p5-js-web-editor-b90b902b74cf https://editor.p5js.org/

In your demo, you had syntax errors and you weren't linking p5.js. So nothing was working. You also need to setup your canvas by using createCanvas method. I don't have any experience with p5.js but take a look at following video. That channel will take you on a long journey and has a lot of lessons on p5.js. In case you you need to animate your objects, you can use GSAP(for what this forum is). You just need to define your values in form of object. To demonstrate, I have changed your body variables in object and animating them using GSAP. If you ever decide to learn HTML, CSS and other stuff, we can point you to some helpful resources. And if you have GSAP API related questions then we would be happy to help.

Ya sure you can animate multiple properties of same element. In following demo I am using timeline and setting position parameter to zero so both animations will start at same time. If you are not using timeline then you can define two TweenMax tweens and they will run at the same time.

Here is @OSUblake's demo showing how you can use morphSVG on canvas.

Ohk, it's not really GSAP thing just how scale behaves when you set cx, cy attributes. I was noticing translate x and y changing in matrix but it wasn't reflecting in _gsTransform. Now it's clarified.

Not sure why it went unanswered. Problem is OP was changing cx, cy attributes of the circle but once at start when you set scale to zero, GSAP will set transform origin based on that initial position. That's why all scale downs were ending up in top left corner. The fix is pretty simple, use GSAP and set the circle's x and y translate. Another thing to note, unlike HTML elements the default transformOrigin for SVG elements is top left corner. @GreenSock I guess it is conflict between data-svg-origin and css transform-origin, I can see matrix updating when scale animates, but _gsTransform doesn't change so it is changing in CSS I guess. Can you explain? Here is reduced test case.

No you don't have to get club membership to use club plugins in Codepen projects. Support for codepen projects was added couple of months ago. Make sure your files are linked properly, if you are still facing problems then post a link to your project.

In previous thread, @PointC was correct. The first frame is visible that's why you have to reduce it by one frame. There are no arrays involved, it is just you shifting background in multiply of frame width. You can add and remove the ticker event listener on mouse enter and leave.

You can pause that and restart just like any tween because it is instance of TweenLite, autoPlay.pause() and autoPlay.restart().

Not sure what you mean, the effect is based on width of the spriteslider so you can't really change the distance after which frame will change. You can easily add longer animation with far more frames and it will perform same. You can even use video with same logic. The speed of your 'tween' can be 10 seconds or 1 second, it won't affect the mouse interaction. You just need to pause your tween when draggable interaction starts.

I get to hear that often but only as 'Golden Ratio logo', 'Golden Circles' etc. So I decided to get to bottom of it before I learn about silver ratio, then one thing led to another and this is what I ended up with. This has no relation with golden ratio, just me drifting somewhere randomly.

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