Swap Cards-Script with Accordion- or Stack-Effect

Scripts and 2-Desktop-Demo-Template are ready for download here:

https://app.box.com/LLCardSwapDemo

The template can be merged with exiting setups, won’t leave much of a trace. Just remove the desktops and propably the scripts.

This video shows how to change basic settings in the scripts and how they influence the effect.

Main settings are:

  var cardPanelPrefix=”pnlCard”; : Panels to be used for swapping must use this prefix in their name (“+”-tab), i.e. “pnlCard01”.

  var cardElasticity = 0.5; : Amount of space between animated cards. Lower value=closer, higher vslue=further.

  var fxAnim=”P”; : Animation Style/Curve: “L”inear, “P”ower (x^pow), “E”xponential (base 2), “B”ack (little bounce).

  var animDelay = 0; : Animation delay per step in milliseconds

  var animSteps = 32; : Steps to use for animation

Additional settings for Card Stack:

  var cardFadeOut=true; : Fade out cards when removing from top of stack.

  var cardSwapOutLength=0.75;var cardSwapInLength=0.5; : Duration of swap in/out (portion of animSteps).

How to use:

(1) add panels and name them properly with prefix (“pnlCard01”, etc)

(2) add shortcut that trigger the script to each panel

(3) add “run script” actions (i.e. to tap-event), choose SwapAccordion or SwapStack script

(4) position panels, align horizontally (same y-position) or vertically (same x-position) as you wish

(5) that’s all

Tipps and Tricks:

(1) One shortcut per panel with “tap”-event set to SwapAccordion and “swipe left”-event set to SwapStack works pretty good.

(2) Important is the panel’s alignment, but not their width/height; variations are pretty interesting.

The scripts:

  Cards_SwapAccordion.js : Swaps cards with Accordion-effect. Prepares parameters for Animation Engine.

  Cards_SwapStack.js : Swaps cards with Card Stack-effect. Prepares parameters for Animation Engine.

  Cards_AnimateItems.js : Generic Animation Engine. To be called via RunScript with parameters passed defining the animations to perform (what? how? choreography etc).

Post with short demo video here: http://goo.gl/aAJZWl

Original thread that inspired here: http://goo.gl/MvWyMW