Jump to content
GreenSock

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

rolodex example?

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!

TIA

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

https://github.com/a8m/angular-filter#fuzzy

 

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

http://htmlpreview.github.io/?https://github.com/mattyork/fuzzy/blob/master/examples/disney.html

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

Thank you, Sir.

The AJAX filtering is not my problem.
I am looking for a tutorial or example to animate the cards like a rolodex

Link to comment
Share on other sites

If filtering is not a problem, then just put all your animations into a single timeline, and use something like .tweenTo() to animate to the card you want. I don't know how you want it to look, but here's a search from CodePen. 

See the Pen ?q=rolodex&limit=all&order=popularity&depth=everything&show_forks=false by search (@search) on CodePen

  • Like 2
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:

 

http://codepen.io/GreenSock/pen/QEaNGx

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

}else{

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.
×