Jump to content
Search Community

rolodex example?

Cor test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

I would like to create a rolodex animation which a user can activate by typing a (part of a ) name or address.

But I don't even know were to start!


My basics are:

Loading all persons from a mySQl database, create a <div>-card per person, and then I am lost...


Any help is appreciated!


  • Like 1
Link to comment
Share on other sites

I personally would use Angular. Here's a really simple demo. Check out how there's almost no code involved!

See the Pen ONEaRY by tvang1101 (@tvang1101) on CodePen


Adding animations to that would be real easy, and Angular will trigger them for you based on your search. That demo is using a standard search filter. I would use a fuzzy text filter from here.



Here's a demo of fuzzy text filter. Notice how the letters don't have to be continuous.


lksz => Lion King - Shenzi
  • Like 1
Link to comment
Share on other sites

Hi Cor,


Hope you are well.


As Blake showed there are a number of ways to set up a rolodex using CSS. 

Worthwhile to study them and find an example that is close to your needs.


Depending on the scope of the project and features it might be a little tricky, and not necessarily something we can help with throughout as we have stay really focused on the GSAP API.


However, something like this will hopefully help you understand some of the basic setup and mechanics:



  • Like 4
Link to comment
Share on other sites

Hi Carl,


I am fine, thank you.

As you now, Flash/AS3 was my thing, but that era is over.

Graphics and animation is very simpel in Flash and the sky the limit.

Now I have to get some skills in graphics in HTML5, CSS3, etc...


The examples you and Blake gave me are a big help!


var loc = "The Netherlands";

If ( Blake =@ loc || Carl =@ loc){

 Cor buy beer;


Thank you very much!!!;


  • Like 3
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...