chrisi51

The same problem i have with function calls via .add() in that timeline. To start section animations i build some function which init the local animation and remove them if you passed the section. This is working from top to bottom but in reversed direction the functions also get called in the reversed direction. I used a second scrolltrigger to address that problem, what is working but is less comfortable at changes on the main timeline. So i thought the way to use .add is the better way but it seems to not know something like enter or enterBack. I've updated my pen. At this point, where the 3 circles get out of the big black one, it should say "animation started" and after the circles are in final position, it should say animation stopped. Thats what works. But on the way back it should be in reversed order. So stopping have to say started and so on. Do you have any suggestions?

Hey there, i just struggle a bit with ScrollTrigger. I have an animation similar to my posted pen. Animation is on scroll ... on end of the animation there are clickable elements which change attributs of the main element (on pen its just the fill). The fill is also changed to yellow in the animation before you can click to prepare the clickable elements for their actions. (on my real animation there is content which have to disappear before the controls can make other content visible ) when i scroll back top those changes are also going reverse but the yellow fill is also reanimated instead of going to black directly. hope you understand, what i mean Thanks for your help in advance.

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

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 ok i guess i got it some more now and i made a little smoother edition https://codepen.io/chrisi51/pen/vYKwBxO and now its getting close to what i wanted https://codepen.io/chrisi51/pen/MWedgVB

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 https://codepen.io/chrisi51/pen/qBNwevQ 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.

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. https://codepen.io/chrisi51/pen/KKMJjyd 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.

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!

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 https://codepen.io/chrisi51/pen/jOrdRNV 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. https://codepen.io/chrisi51/pen/YzWBMvP

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)