random number and tracking them / sending signal via keyframes
hi guys
I wanna test a thing with my question (1st is it enough for me to talk alone with no code sometimes i know its harder tho i just wanna know so the first part is without the code and the second part the code exists)
I created a program to give me 2 random numbers and put them in keyframes
so just imagine a ball that goes from point 1 to point 2 and then 1
and the 2 variables are different + changing all the time each time animation stops by timing them so the ball always change direction and comeback
and i created 4 varaiables in hopes of achievig the ball goes to point 2 from 1 and then back to point 1 but the thing is i want it all infinite and the point 1 is changing now too
so its a chaotic move since there is no order
the problem:
what ever i do i cant fix the timing since after animation finish the ball jumps
its sth like the ball goes from point a to b then i want it to go to c without adding any variables and use the a variables but this either needs a ton and endless of keyframes or sth that i dont know of
https://codesandbox.io/p/sandbox/f4lyv8
i dont think this site shows it completly it goes koko after a while
https://stackblitz.com/edit/stackblitz-starters-3uzqkd?file=index.html
i hope this ones work
these all are the example of the first one i couldnt create the second
21 Replies
so i thought for the second 1 i either need a tracking so it recognize the last point and it continues from there and not accepting new info
or send a signal or sth from css so js waits till the signal then it changes
or just sth i dont know!
Why are you declaring all these vars in both functions if you're only using
x and y in the first and m and n in the second? Also selecting the root twice instead of globally, which I'm not sure will work as you have it, selecting :root. I'd have to test if it does but you just need the document.documentElement , then you don't have to parse css selectors.well its just a copy paste just learning and want to mess with stuff as well so i get to to do what i want
I just want my animation to go from a to b to c to d
not go from a to b then jump to c then go to d
I'm afraid that I am struggeling to understand what it is that you are trying to do here. It looks like you are trying to animate the center point of a radial gradient - this is always going to be much more complicated than just animating the location of an element (ball in this case) but maybe I have missed something...
However I can say that, if you want the JS to wait until the CSS animation has ended, you can use the event listener
transitionend https://developer.mozilla.org/en-US/docs/Web/API/Element/transitionend_eventok i make it simple as i can
keyframe
10% go to 10% 10%
20% go to 36% 85%
30% go to 71% 10%
.....
.....
tho now i wanted to be randomly generated so i dont have to click so i fixed the js with math random number and stuff
so now i want it to be infinite so I infinite the animation
now i wanted to make the animation not predictable cause
when u do it , its a pattern in the whole area and it goes again
so for that to be achieved it in my opinion it should be
keyframe
0.001% go to x y
0.002% go to m n
....
....
but we dont got this shit to 100%
and im not making it :/
so the next opinion was to make it so randomized again in js be timer so for example if a = 10% then after 2 seconds it would be 58%
and i did that in js
now i thought it would be cool if it goes from a specific and know point to a unknown then comback to the begining
it worked i did it yay
but again my fucking brain said what if it starts from a point and got a unknown point and to another unknown point and ,,,, so it reaches the end and i successeed in that too
then i was wondering what happens if everyreset in animation was turning to sth new
like if first time balls goes to a then b then c and animation ends then the next animation which is actually the same (its infinite one) goes from c to d and e and so on next animations goes from e to m to n
and i did that too tho the problem im facing is that i dont know what to do for it to work it keeps teleporting
cause lets say a changes every 5 sec and b is the same and animation duration is 7 too
so if a was 1% 100% and b was 1% 1% then keyframe a to b would be simple it goes from 1% 100% to 1% 1% but after 5s a becomes 50% 50% and b becomes 70% 93% so keyframe isnt even finished yet but since these 2 changed keyframes calculate where the ball is in 5.0001second from new a and b and it teleports there and continues the way
hope u underestand and if not tell me what u think and where is the problem plz
I really got no idea now how to make it 🥲
I don't think that keyframes is the way to go with this.
Also, I don't really understand why you are trying to update a radial gradient rather than moving the element itself. Will the gradient change also? If not, transitioning the position of the element will be much simpler.
Can you try to explain, in simple terms, what you want the "ball" to do. ie where it starts on page load and where you expect it go every X seconds. Sometimes you say you want it to go back to the center and other times not - it is quite confusing!
eg:
1. start at center
2. move to random position
3. return to center
4. move to new random position
5. return to center
etc.
or
1. start at center
2. move to random position
3. move to new random position
4. move to new random position
5. return to center
6. start again....
or
1. start at center
2. move to random position
3. move to new random position
4. move to new random position
etc. (ie not return to center)
the gradiant is just an example i wanna learn
as u said:
1. start at random or center
2. move to random position
3. move to new random position
4. move to new random position
this seems great
never ends and if it ends then continues from previous location and go to other randoms
OK, so you have massivly over-complicated this for yourself by trying to update a gradient center point.
If you just need to move an element (eg a ball) randomly around it would be much simpler to move the element itself using "translate".
You generate the random positions with the JS and update the element x and y position via a custom property or even by adding it directly to the element using el.style.translate.
In the CSS all you would need to do is add a "transition" on the translate, eg.
and i was just explaining what really happened that this happened at the end
btw what if i wanna use keyframes and gradients tho? with all that complication
still tnx a lot
Do you really want to change the gradient center point or do you just want the element to have a gradient?
I wanna learn and create what i was thinking
so in order for that i go creative
OK, I'm afraid that I don't really understand what it is that you want to do so I will have to leave you to it. Maybe somebody else will have a clearer understanding of what you want to do 👍
if i say yes i want to move the gradient would it solve ur issue?
Changing the center of the gradient is not the same as changing the position of the element with the gradient.
Your code seems to indicate that you want to change the center of the gradient and this is much more complicated. That is why I am trying to understand what you are actually trying to move.
the center gradient
OK.
So, returning to your code (at least the one that you posted here), as I understand it you have 2 main issues:
1. Returning to start point after each change
2. Not transitioning between points, rather it is jumping.
3. (ocasional) the timing is sometimes off
To address the first issue, this is due to the way that the animation works. You have defined both the 0% and the 100% to have the x and y positions of 50%. This is what is sending the "ball" back to the center.
You could store the new randomly defined x and y positions and use them for the successive start point at 0% and make the new x and y the end point at 100%.
Something like this:
and the JS something like this:
However, this may still have issues with the timing as the new positions may well not coincide with the animation loop itself.
To fix that, rahter than using a fixed setInterval, you could use the "animationend" eventlistener on the "app" element. Once it detects the end of the animation, it will call the function again.
Note - you would also need to remove the animation "infinite" as otherwise it will never end and the eventlistener won't be fired, and then start it again with the JS once the new X and Y postions have been defined
Bear in mind that none of this will resolve the transition aspect - the "ball" will still be jumping around the container from point to point.
As you say, for that you are probably going to have to generate keyframes between the 2 points (last and new) dynamically.
didnt get the last message ! what do u mean ?
like it teleports or whats the problem?
With this code it "jumps" from one position to another (maybe that is what you mean by "teleport". This may be fine.
However, as you have mentioned keyframes several times, I imagine that what you really want it to do is to move across the screen to the new position. To be able to do that (if you want to continue updating the gradient start position) you are going to have to use keyframes, defining the new X and Y position at for each step/keyframe.
ok tnx a ton man i wii try it and tell u the result (gonna take a bit long time tho but i will)
This is why it would so much simpler to move the whole element and not the center of the gradient but if that is what you want/need to do....
who cares about being easy
i told u i wanna learn and that means all this unknown stuff + suffering so yay Im happy that i learn