Rolodex Effect

[Filip Vandueren]

Hey David,

here’s a solution:

OK, I created a Null with a ‘numCards’ slider and a ‘viewCard’ slider. The ‘viewCard’ is the one you’ll animate;

Create a rolodex card-layer, put it’s anchorpoint below its lower edge

here’s the expression for X-rotation:

numCards=thisComp.layer("Null 1").effect("numCards")("Slider");
viewCard=thisComp.layer("Null 1").effect("viewCard")("Slider");

v=((index-1) * (360/numCards) + viewCard*(360/numCards))%360;

if (v<10) {
ease(v,0,10,-20,120);
} else {
linear(v,10,360,120,340);
}


Let me know if it works out.

[David Rickles]

That worked perfectly…is there any chance I could get you to tell me why it works? I’m still trying to learn, and that didn’t seem as complicated as I was thinking it would be….

Thanks so much!!!

David

David Rickles
Producer, Editor, Animator
David.Rickles@gmail.com
http://www.davidrickles.com

[Filip Vandueren]

obviously creating the sliders and linking to them is to have some flexibility, otherwise if you change the number of indexcards, you have to change all the expressions…


numCards=thisComp.layer("Null 1").effect("numCards")("Slider");
viewCard=thisComp.layer("Null 1").effect("viewCard")("Slider");


Next the motor of the expression:


v=((index-1) * (360/numCards) + viewCard*(360/numCards))%360;


this basically just distributes the layer around 360°:
using _index_ makes sure the value is different for each subsequent index-card because the calculation is based on their indexnumber,
(360/numCards) makes sure that the angle between each card adds up to 360,
and when viewCard gets animated, the wheel will spin.
It ends with a %360, which wraps values above 360 back to 0: so 372%360 = 12

if the expression were to end here, you’d simply have a wheel of indexcards evenly spaced. Animating ‘viewCard’ would just spin the wheel.

But we want a rolodex effect: part of the spin should go really fast (the flip), and then it should go slow, untill the circle is complete.

_v_ gives us values from 0-360, and we will interpolate them to program the ‘flip’:


if (v<10) {
ease(v,0,10,-20,120);
} else {
linear(v,10,360,120,340);
}


if v<10, we will create an ease interpolation, that yields values from -20 to +120: a very fast 140° occurs in what would be the first 10° of the cycle, using ease adds some cushioning.

after that (v>10) the cards take their time to go full circle back to 340° (= -20°)

ease() and linear() are two very nice methods that let you "rescale" values

[Zach Meissner]

thanks for this great expression! however i cant quite get it to work. on which layer do i apply the expression? i’m assuming the layer needs to be in 3d? thanks for the help!

[Luke White]

This is very useful,

Can you explain how I can use an expression on the opacity so that it eases into visibility concurrently with the movement of it slowing down.

I tried pasting that expression into the opacity and not really sure how to adjust the easing.

Any help?
Thanks

[David Rickles]

Hi Luke,

Below is a solution I was able to come up with for this that is still driven by the same stuff that’s already being used…Apply this to the opacity layer.

numCards=thisComp.layer(“Null 1”).effect(“numCards”)(“Slider”);
viewCard=thisComp.layer(“Null 1”).effect(“viewCard”)(“Slider”);

v=((index-1) * (360/numCards) + viewCard*(360/numCards))%360;
opac = v/36;
if (opac<2) {
ease(opac,0,2,99,100);
} else {
ease(opac,2,numCards, MINIMUM OPACITY VALUE,MAXIMUM OPACITY VALUE)
}

To use this, change the minimum and maximum values to be what your flavor is. This will gradually make it less transparent as it approaches the "Front Cards".

Hope that helps!

David

David Rickles
Art Director | Motion Designer
David.Rickles@gmail.com
http://www.davidrickles.com

[Alexa Nel]

KING! thankyou so much.