Dynamic animation from array

[superbenj]

Hello, I wonder if it is possible to make an animation from the data of an array?
Suppose that every second I would like to change one of the 4 divs below randomly with a new character and this every second indefinitely?

 

 

See the Pen GRxMGKJ by superbenj (@superbenj) on CodePen

[iDad5]

Sure you can do that, but this more of a general JavaScript question firs and a gsap question second.

The way I see it, you could simply generate all possible 'divs' with JavaScript and attach them to the containers randomly. Then every second you choose or loop over the container attach one of the currently unused 'divs' in 'the background' of the container and now would be the time for gsap to shine, animate the old character out and the new character in. Once this is done, remove the old character from the DOM - rinse and repeat. 

Do I make sense to you?

[superbenj]

Ok, so i did what I think you proposed

 

I'm getting an infinite loop which is what I want, but the delay function doesn't seem to work..

 

but can I use gsap during the script like I did?

 

 

See the Pen abYLjYm by superbenj (@superbenj) on CodePen

 

 

[iDad5]

As fas as I can see the way you go about the animation part shouldn't be the problem, I personally always find those antonymous functions inside one another hard to read an debug, and prone to what happened to you - a drop into the infinity abyss

 

[Dipscom]

'Ello!

 

Allow me to butt in. Sometimes one just finds the idea enticing enough to do the work for others.

 

Bear in mind there are several ways to skin a cat and this is one. Also, bear in mind I did get carried away and added other bells and whistles that are not within the question here BUT, I do hope the code is written in such way that everyone can reason around it.

 

And as per request, it's a GSAP-based solution.

 

Enough rambling.

 

See the Pen 326ea45a277aa98cd3df85553f2ede48?editors=1010 by dipscom (@dipscom) on CodePen

[superbenj]

hehe thanks @Dipscom

 

This is pretty much what I"m looking for, except that ideally I remove one div at the time and replace this one with another one, pretty like if you guess the good name then another character appears

 

 

 

[Dipscom]

Well, then, there's some homework for you. There should be all of the pieces needed on that example for you to adapt to your needs.

[iDad5]

Well, this is a bit awkward, but tose funny faces and the great data provided by @superbenj made me want to do what @Dipscom did.
More or less. I have a colleague that I'm supporting in learning TypesScript and this thread presented a nice opportunity for a little project, where all the work of finding pictures, and texts was already done.

He wants to do puzzles and quizzes, so wie started an online Session last evening... (not knowing that Dipscom had already beaten us to it)
 

What we have done is mostly typescript with a sprinkling of GSAP and it is absolutely over-engineered, as we think about sometime extend it to a puzzle in our next session - and were exploring the possibilities.

So for everyone who's primality interested in the GASP Dipscom's solution is far better and uses gsap a lot cleverer. 

I post our little project anyhow, in case someone is interested. 

See the Pen RwMjNeO by mdrei (@mdrei) on CodePen

[Dipscom]

Talk about bringing a gun to a knife fight.

 

Sheesh, some people...

[iDad5]

If you insist on the fight metaphor, I'd say, that it's more like you found a unloaded gun on a man how has died of old age, while dragging himself to the duel - grounds. 
 

Pfff - those young ones ---- sigh.

[Dipscom]

So.

 

Not only a zombie, who's already deadly enough but, a zombie with a gun on its hands.

 

Dragging itself relentlessly after me.