Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Dynamic animation from array

Recommended Posts

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

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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



Link to comment
Share on other sites

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 ;-)


Link to comment
Share on other sites



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

  • Like 3
Link to comment
Share on other sites

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




Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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

  • Like 2
Link to comment
Share on other sites

Talk about bringing a gun to a knife fight.


Sheesh, some people...

  • Like 1
  • Haha 1
Link to comment
Share on other sites

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.

Link to comment
Share on other sites



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


Dragging itself relentlessly after me.

Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.