Leaderboard

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

Khan Academy uses Processing.js which is basically the same the thing as p5.js. You should be able to share your code from there, or on OpenProcessing. https://www.openprocessing.org

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

Thanks, Sahil! You've been a great help.

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

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.

After two weeks of banging my head on that blank wall of no knowledge I finally regrouped and figured out the problem. As I said the variables is what had not been not done correctly. But during this time I became more creative in my design and the stars were transformed into UFO's, star ships with 3 different layers, and now they move in different directions. What worked was remembering an earlier project where clouds moved outward to allow the sun to shine through. Thus the use of var rightX & var leftX, and the code using rightX += 1; and leftX - =1;. By adding the first of these to the code for each star ship I was able to move one to the left and one to the right. Thus completion of this project. The course i am working on is computer programming in Java Script. Moving forward math is becoming harder. As a free member here I will come and read and try using your site for more studies. Thank you for being patient with my lack of sense in trying to understand your helpful suggestions.

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.

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

Just so you know, this is in the official release now (part of the GSAP 2.0.2 push). Enjoy!

This should be resolved in 2.0.2 (just released).

Check out https://css-tricks.com/writing-smarter-animation-code/

CustomBounce is a perk of Club GreenSock membership (which I highly recommend): https://greensock.com/club You can always give it a try on CodePen: Happy tweening and bouncing.

onReverseStart() is pretty thoroughly discussed in these threads. Happy tweening.

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.

Let me use my psychic powers. It's unclear if GSAP is being used, but I am seeing p5.js. That's the only thing I know of that uses a draw() function. We don't get a lot of questions about p5.js, but it's pretty to easy to animate with GSAP. I remember helping somebody with p5.js here.

Sure, can you please post a reduced test case, like maybe as a codepen or jsfiddle? It's super difficult to troubleshoot blind, but once we see what you're doing, I'm sure we can offer some help. See (You are using GSAP for the animation, right?)

I have something that's been kinda bugging me for a bit when tweening an element's css scale property with js gsap. so i figured i would ask about it since i haven't been able to find anything bout this topic on the forum here. let's say i tween something that changes the transform matrix of an element like: TweenLite.to( elem, 0.5, { ease: Back.easeIn, css: { scale: 0 }}); and then say when i tween the element back in with: TweenLite.to( elem, 0.5, { ease: Back.easeOut, css: { scale: 1 }}); the transform css property will stay on the element ( transform: matrix(0, 0, 0, 0, 0, 0); ) even if the scale was set back to 1.0. is there an alternative solution for scaling elements that will remove the transform automatically afterwards? or is the only solution going to be using the onComplete callback to remove the transform myself after it's done? thanks!