Jump to content
Search Community

Dynamic animation from array

superbenj test
Moderator Tag

Recommended Posts

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

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

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

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.
  • Create New...