Infinite Loop Question
Hello!
I'm attempting to infinitely move an object randomly across the viewport. Below contains some code I used to be able to set random position (based on current position). However, I need to be able to loop this consistently. Which loop should I use?
33 Replies
setInterval is fine if you're not too worried about having the interval be millisecond perfect
I was thinking setInterval as I want to also add a short delay between iterations
Cool thank you 👍
@Jochem Do you know why this is returning NaN?
which is? randomX?
newPosition is returning NaN when running
newPosition doesn't return anything
Shouldn't running the function change the left coordinates?
ah! You've got x set to blob.x it should be position.x
Missed that 😅
Thank you 😀
np!
@Jochem Hey if you don't mind, I have a question regarding this.
The current code is working now, but I'm looking to have positions change with an animation. I added to the object's CSS class -
transition-timing-function: ease;
but the position changes are still abrupt. Is there a simple solution to make the position changes gradual?I think you'll have to set a transition, so in the css class try transition: [the property] [the duration] [timing function]
So you could say
transition: left 100ms ease;
I think that should work,
Here is a video from Kevin about that:
https://youtu.be/YYlFFMc0RAg?si=wqwPf9tfArb8IYJ1
Kevin Powell
YouTube
Animating with CSS Transitions - Using transitions in action
There are a lot of fun and creative ways we can use CSS transitions, and in this video I explore a few of them by animating a few different things, looking at using custom timing functions and how using transition delay can help improve user experience along the way.
High performance transitions: https://medium.com/outsystems-experts/how-to-ach...
I tried this right before you posted actually. It's still yielding the same result
Do I need to trigger a class with JS?
https://css-tricks.com/controlling-css-animations-transitions-javascript
Did you set the transition on left and on top?
transition: left 100ms ease, top 100ms ease;
This works actually:Could it be that they are transitioning?
blob.classList.add('blobTransition');
what happens if you add the class in html?
Doesn't fix the issue
Seems to only happen on the first loop, I moved the class change before position change and still persisting
do you have this code in a codepen perhaps?
Sure, one second
https://codepen.io/Matt-CopOffMatt/pen/MWZbNor
i think it's because you don't have an initial left and top value
it doesn't transition because it has no value to transition from, normally if you add
left:0;
top:0;
to .blob it should work.
also, if you do a newPosition(); right before the setInterval the blob will instantly start moving👍
Awesome, thank you so much
no problem, happy to help!
!close
-close
you don't need to close posts, you can add a solved tag if you want
Okay cool
they autoclose after two weeks or something
@Jochem I was going to make another thread, but I don't want to spam them.
Would I be able to ask you a CSS-related question here?
it's prefered to make a new one actually. That way the topic matches what gets discussed, and it helps other people find answers too later
no worries about spamming threads
Okay, thank you