chrisi51 Posted November 15, 2020 Share Posted November 15, 2020 Hey guys, im completely gsap newbie and need urgently help on a very time critical project. I try to accomplish to let some objects "fly" into one central object, which is also moving. So my flying objects need to grab the actual position of the central object from time to time and update their motion. In my codepen, the green ball shows my actual movement. It apears, moves to the square (central object) and disappears to start again. The square is moving and the red ball illustrates, what i want to accomplish. It knows the knew position and can move over there and disappears also. So my ball is all the time comming up, moving to central and disappears in a loop. The central is moving "randomly" so it have to get calculated. I got inspired by this one: https://codepen.io/osublake/pen/JMvVyo but for any reason im not able to use it. seems like, there is a lib included (ThrowPropsPlugin), i would have to pay for, to use it but it seems that this lib is doing. the magic. Is there any way, i can tell my ball, that it have to change the movement to get to its target? Thx in advance Chris (Btw: i've spent hours, reading google and gsap forum for finding any similar but all answers were like "impossible" but some workarrounds were always available but nothing i could addept) See the Pen zYBeMLE by chrisi51 (@chrisi51) on CodePen Link to comment Share on other sites More sharing options...
mikel Posted November 15, 2020 Share Posted November 15, 2020 Hey @chrisi51, Welcome to the GreenSock Forum. There are several options. If you want to follow the concept of @OSUblake, it could work like this: See the Pen ExyrJgp?editors=1010 by mikeK (@mikeK) on CodePen Happy following ... Mikel 2 Link to comment Share on other sites More sharing options...
chrisi51 Posted November 15, 2020 Author Share Posted November 15, 2020 hi @mikel thx for your reply actually that was the same i just accomplished but the ball have to start on its entry position ... the green ball have to start always from the red balls position, after it reached the square center See the Pen jOrdRNV by chrisi51 (@chrisi51) on CodePen So what i mean is, if we take your pen, after the green ball reached the square, it should vanished and start again at the red balls position to meet the square again and a again. so it should not just stay behind it. And btw. if this changes anything - all the blue balls should do the same ... so its like 20 items which just try to collidate with the square and after that they try a gain from their origin start point. its very minified to what it should become afterwards but this is the main problem - right now. See the Pen YzWBMvP by chrisi51 (@chrisi51) on CodePen Link to comment Share on other sites More sharing options...
mikel Posted November 15, 2020 Share Posted November 15, 2020 Hey @chrisi51, Does this variant help you? See the Pen YzWBojJ by mikeK (@mikeK) on CodePen Happy tweening ... Mikel 3 Link to comment Share on other sites More sharing options...
chrisi51 Posted November 15, 2020 Author Share Posted November 15, 2020 Hey @mikel this looks pretty good. I will have to adept it to svg and then add more balls at random position to it but i will have to check that I really appreciate your help! Link to comment Share on other sites More sharing options...
chrisi51 Posted November 18, 2020 Author Share Posted November 18, 2020 Finally! Thank you @mikel for your support ... i bet there is some dirty stuff in the code which is slowing down everything but thats how it works for the moment. If anybody have some performance suggestions, feel free to post them as i need to put like 20 or 30 circles into it and i bet its getting slow then with all those intime calculations. See the Pen KKMJjyd by chrisi51 (@chrisi51) on CodePen And i really dont understand how those timings are working in that timeline. i want to make the scale down while it is moving so that it looks like the square is sucking in the circles. but for any reason its like moving a little to the square, than scale down and then do the rest of the way. Link to comment Share on other sites More sharing options...
ZachSaucier Posted November 18, 2020 Share Posted November 18, 2020 Not a performance suggestion, but we recommend that you use the GSAP 3 syntax: Link to comment Share on other sites More sharing options...
chrisi51 Posted November 18, 2020 Author Share Posted November 18, 2020 hey @ZachSaucier i use scrollmagic on my site ... is that compatibel with gsap 3? Didn' t found info on scrollmagics site. same in gsap 3 See the Pen qBNwevQ by chrisi51 (@chrisi51) on CodePen And i really don't understand how those timings are working in that timeline. i want to make the scale down while it is moving so that it looks like the square is sucking in the circles. but for any reason its like moving a little to the square, than scale down and then do the rest of the way. Link to comment Share on other sites More sharing options...
ZachSaucier Posted November 18, 2020 Share Posted November 18, 2020 34 minutes ago, chrisi51 said: i use scrollmagic on my site ... is that compatibel with gsap 3? Why use ScrollMagic when you can use ScrollTrigger? It's better in every way - smaller file size, easier to use, and more features! 37 minutes ago, chrisi51 said: i really don't understand how those timings are working in that timeline By default tweens in timelines are sequenced one after another. Maybe it'd be better if you separated your tweens a bit: some to affect the position and some others to affect the scale or other properties. You can use the position parameter to place things in timelines with more control. Link to comment Share on other sites More sharing options...
chrisi51 Posted November 18, 2020 Author Share Posted November 18, 2020 1 hour ago, ZachSaucier said: Why use ScrollMagic when you can use ScrollTrigger? It's better in every way - smaller file size, easier to use, and more features! that one i would have to check ... its my first time i do massiv animations and so i have to get into all this stuff thank you for your suggestions 1 hour ago, ZachSaucier said: By default tweens in timelines are sequenced one after another. Maybe it'd be better if you separated your tweens a bit: some to affect the position and some others to affect the scale or other properties. You can use the position parameter to place things in timelines with more control. ok i guess i got it some more now and i made a little smoother edition See the Pen vYKwBxO by chrisi51 (@chrisi51) on CodePen and now its getting close to what i wanted See the Pen MWedgVB by chrisi51 (@chrisi51) on CodePen Link to comment Share on other sites More sharing options...
mikel Posted November 19, 2020 Share Posted November 19, 2020 Hey @chrisi51, Just for fun and little tricky See the Pen 61a9b29fd5791397017821817a0d216b?editors=1010 by mikeK (@mikeK) on CodePen Happy random ... Mikel 3 Link to comment Share on other sites More sharing options...
chrisi51 Posted November 19, 2020 Author Share Posted November 19, 2020 hey @mikel seems like i really should go deeper into gsap as there seems to be a lot stuff which i have to do in jquery cause i dont know they also exist in gsap. Just tried to make it creating 24 circles as i have in my pen ... yours seem to be faster ... on mine firefox takes like 17% + 25% of cpu. yours on 24 circles ist taking 17% + 17% but on your side their a lot less calculations as its not following in that way as mine does i will consider to dive into that pen later to get more practice with the toolbox behind gsap and @ZachSaucier scrolltrigger is indeed by far better to handle thx for that suggestion really love that fast feedback 3 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now