Jump to content

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

Animating through elements... (not as simple as it sounds)

Recommended Posts

Hello, lurker here - hoping someone may be able to to help with an effect i'm trying to replicate... apologies if this doesn't make sense as i'm usually useless at explaining things.


I have 3 columns, each column contains 5 cards that i need to loop through and show. this will keep repeating infinitely. I have managed to get to this stage (see codepen attached), however i'm struggling on the next part of the animation.


In each column, the next two cards behind the active card (that are coming up next) need to be behind and approx 10/20 pixels above and to the left of the active card. the active card will then move down and right, and also fade out. this card then needs to be placed to the back of the pile ready for the next loop.


There may also be extra 'cards' added or removed if this changes anything, and they are generated from an object containing arrays with strings, and not hard coded as shown in the demo


If anyone could point me in the right direction, that would be great as i'm struggling! I've also attached an image to show the desired end result... 

Screenshot 2021-04-21 at 12.48.18.png

See the Pen WNRaOWK by norrisollie (@norrisollie) on CodePen

Link to post
Share on other sites
  • norrisollie changed the title to Animating through elements... (not as simple as it sounds)
16 hours ago, OSUblake said:

I'd just do a recursive function call to reorder the cards and start again. Simple example....






Hello, thanks very much for this - it is really helpful. One thing, i'd like to make the box at the back fade in rather than just appear - what's the best way to do this? I've had a play around but can't for the life of me figure it out.... :D any pointers would be great, thanks!

Link to post
Share on other sites

Yeah, I figured that, but I didn't want to complicate it more. So instead of setting the opacity of every card to 1, just set and animate the cards you want visible.


See the Pen 8380c56a4271a063d36ec1cca59fb2ca by osublake (@osublake) on CodePen



  • Like 1
Link to post
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.