Shapes Animation

[devFatih]

Hello Friends, I'm new to GSAP and I'm using it on the site I'm making now. How can I write a code that will move the shapes you see in the picture below to different different areas and collide if they collide with each other?

 

Here is a codepen link;

See the Pen OJqKzwQ by devfatih (@devfatih) on CodePen

[mvaneijgen]

Hi @devFatih welcome to the forum!

 

What have you tried already? We love to see what you can come up with, that way we can see your thought process and thus better help you understand the tools!

If you're new to GSAP check out this awesome getting started guide https://gsap.com/resources/get-started/

 

There is no collision detection in GSAP, so you either have to write your own logic for that or find a library that does that, but that will make the code base 100 times more complex, when starting out I would keep it simple an start experimenting with what is possible just GSAP,  the getting started guide is a great start for that. 

 

Hope it helps and happy tweening! 

[devFatih]

Thanks, the desire to collide was a possibility, but not a necessity. I will update and share the final version of my code in codepen.

[devFatih]

Hello again my friend, I updated my codepen work and I was able to do this for the moment. I randomly assigned -100%, 100% values on the X and Y axis, but it did not work on the entire .page-header element, it only worked in the area where it was close, I guess I didn't fully understand.

[mvaneijgen]

Nice job! That was quick!

 

What exactly is the issue now that the shapes get cut of or that they just move a little? Currently you've set the animation to only animate 100% of their own width eg 100%, do you want them to move the entire screen width. That would be easily done, by changing the current random you have to include the screen width and height, but I think that is also not what you want, because it then look like this 

 

See the Pen GReVQzz?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[devFatih]

yes i wanted it to move across the whole screen width, thanks for that, but the animation didn't work as i wanted. i want the shapes to move smoothly up, down, right and left in the .page-header, if i understand correctly, right now it only moves to the right and left side and waits when the animation is complete.

[mvaneijgen]

Yes, because you set yoyo: true and your stagger: 0.3 makes it will wait for all the elements to be done animation and then move back to their original position. 

 

What you can do is remove the yoyo: true and set repeatRefresh: true,  which will make it each element will get a new random location each time the tween is repeated. If you still need help please show what you've already tried your self in a new demo, so that we can help you understand the tools better. Happy tweening!

 

See the Pen RwdXMYN by mvaneijgen (@mvaneijgen) on CodePen

[devFatih]

btw i update my codepen

[mvaneijgen]

Please repost the link to the pen each time you update it (or a new pen, version management). Is repeatRefresh: true,  a solution for you? if you change your tween from a .fromTo() to a .to() it will start each time from its current position. 

[devFatih]

Good morning pal,

repeatRefresh didn't work for me, I don't want to return to the starting point after the animation starts and ends, I want to keep it moving randomly.

here is my codepen link

[mvaneijgen]

If you remove yoyo: true, change to a .to() tween and set repeatRefresh: true,  it does wat you want right? 

 

See the Pen GRLKKRy by mvaneijgen (@mvaneijgen) on CodePen

 

 

[devFatih]

yeah that's it. thanks for your support