GVI02

My main idea is to be able to draw a curve based on a given formula, but I'm not sure how to do it. I can solve the function for a punch of values and draw points at each on a canvas, or maybe I can do something with svg paths and bézier curves.

Hmm I gravitate towards svg, I don't know why. I am thinking about making a coordinate system where you can animate different functions, points and such. What would you recommend for this>

Hello there, hopping everyone is having a great day. Web animations are a new world for me, which I've had a lot of fun exploring in the past few weeks. I've started a few small projects and have a lot more ideas. Each time I start one I find myself at this weird crossword where I know how I want to animate an object but I'm not sure what that object should be, should I make a canvas, an svg, maybe a div, or just slap a jpeg and call it a day. So I am here, yet again, in the GreenSock Forum seeking knowledge. Which way of doing things is best in what situation?

I was in the middle of a project when I ran into this problem. This is a smaller version of the original but illustrates the issue well. The situation is as follows: there are 8 cubes in 2 rows and two buttons. The first for animating the one by one by rows and the second by columns. However, when I start the second animation it just "removes" the cubes. Also the cubes disappear at the start so that isn't ideal. I think this might be because the animation "prepares" the values for the animation but i'm not sure. Thanks in advance.

Thank you, that worked perfectly and its such a simple solution, and here i was trying to do convoluted maneuvers.

My overall goal is to make a visualization of the Bubblesort algorithm. I want the values to be represented by the height of the rectangles and the changing order values in the set to be represented in the swapping of the rectangles.

Ok, here is a simple demo. Some of the numbers like the matrix variables and rectangle height, which would otherwise be calculated, are hard coded here. The idea is to first swap the positions of the orange and green rectangles and then the green and red ones. https://codepen.io/GVI_02/pen/GRpvWzd

It could work and I will definitely try it but I ran into another problem in the mean time. I solved the previous problem by describing the x coordinate not as an attribute but as a transform matrix when the object is created and it works. Now the problem is that the way I have done things is that I have a function that is triggered by a button, this function calculates the new position and starts a gsap.to() to change it. However this function is called many times repeatedly and when it gets called again the previous animation hasn't finished and so the new coordinates aren't yet updated. I tried putting the animations in a timeline and using the isActive() function but both didn't help. Is there are way to stop at a certain point and wait until the animation is complete.

Hello everyone, i started trying out GSAP a few days ago and I've been trying to create an animation involving moving a set of rectangles, but I ran into a bit of an obstacle. Imagine a row of lets say 10 rectangles (all elements in an svg). I want to swap the position of two of those. My implementation of this (which does not work properly) is the following function which calculates the distance between the elements and then uses gsap.to() to move them: function swap(){ var rect0_x = document.getElementById('rect0').getAttributeNS(null, 'x'); var rect1_x = document.getElementById('rect1').getAttributeNS(null, 'x'); var distance = Math.abs(rect_1x - rect_0x); var rect0NewX = rect_0x + (rect0_x > rect1_x)? -distance:distance; var rect1NewX = rect_1x + (rect0_x > rect1_x)? distance:-distance; gsap.to("#rect0",{duration: 1, x: rect0NewX}); gsap.to("#rect1",{duration: 1, x: rect0NewX}); } However, (as I have recently learned) .to() doesn't change the actual x value but applies a transform to the object. What I want to achieve is to swap the objects, but when the same object is swapped multiple times, each one is applied over the past transformation ( as to preserve the most recent shift of the x coordinate). Any help and tips would be greatly appreciated.