Alloy animation utilities
This page lists PurgeTSS classes available to Alloy's <Animation> component. These classes are generated into TSS and are not available in Titanium Classic. Classic uses the native JavaScript equivalents in the table at the end of this page.
anchorPoint
The point on the View around which animations pivot.
A dictionary with x and y properties, where {x: 0.5, y: 0.5} is the center of the View.
Default: (0.5, 0.5)
Titanium exposes this property on different proxy types by platform: Ti.UI.Animation.anchorPoint is Android-only, while Ti.UI.View.anchorPoint is iOS-only. Test pivot-dependent motion on both targets.
/* Property(ies): anchorPoint */
/* Component(s): Ti.UI.Animation, Ti.UI.View */
'.origin-center': { anchorPoint: { x: 0.5, y: 0.5 } }
'.origin-top': { anchorPoint: { x: 0.5, y: 0 } }
'.origin-top-right': { anchorPoint: { x: 1, y: 0 } }
'.origin-right': { anchorPoint: { x: 0.5, y: 1 } }
'.origin-bottom-right': { anchorPoint: { x: 1, y: 1 } }
'.origin-bottom': { anchorPoint: { x: 0.5, y: 1 } }
'.origin-bottom-left': { anchorPoint: { x: 0, y: 1 } }
'.origin-left': { anchorPoint: { x: 0, y: 0.5 } }
'.origin-top-left': { anchorPoint: { x: 0, y: 0 } }
/* anchor-point-{position} variant */
'.anchor-point-center': { anchorPoint: { x: 0.5, y: 0.5 } }
'.anchor-point-top': { anchorPoint: { x: 0.5, y: 0 } }
'.anchor-point-top-right': { anchorPoint: { x: 1, y: 0 } }
'.anchor-point-right': { anchorPoint: { x: 0.5, y: 1 } }
'.anchor-point-bottom-right': { anchorPoint: { x: 1, y: 1 } }
'.anchor-point-bottom': { anchorPoint: { x: 0.5, y: 1 } }
'.anchor-point-bottom-left': { anchorPoint: { x: 0, y: 1 } }
'.anchor-point-left': { anchorPoint: { x: 0, y: 0.5 } }
'.anchor-point-top-left': { anchorPoint: { x: 0, y: 0 } }
autoreverse
Whether the animation replays in reverse after completing.
Default: false
/* Property: autoreverse */
/* Description: Specifies if the animation should be replayed in reverse upon completion. */
/* Component(s): Ti.UI.Animation */
'.autoreverse': { autoreverse: true }
'.autoreverse-false': { autoreverse: false }
curve
Animation curve or easing function.
This API can be assigned the following constants:
/* Property: curve */
/* Description: Animation curve or easing function to apply to the animation. */
/* Component(s): Ti.UI.Animation */
'.curve-animation-ease-in': { curve: Ti.UI.ANIMATION_CURVE_EASE_IN }
'.curve-animation-ease-in-out': { curve: Ti.UI.ANIMATION_CURVE_EASE_IN_OUT }
'.curve-animation-ease-out': { curve: Ti.UI.ANIMATION_CURVE_EASE_OUT }
'.curve-animation-linear': { curve: Ti.UI.ANIMATION_CURVE_LINEAR }
delay
Delay, in milliseconds, before starting the animation.
/* Property: delay */
/* Description: Delay, in milliseconds before starting the animation. */
/* Component(s): Ti.UI.Animation */
'.delay-0': { delay: 0 }
'.delay-25': { delay: 25 }
'.delay-50': { delay: 50 }
'.delay-75': { delay: 75 }
'.delay-100': { delay: 100 }
'.delay-150': { delay: 150 }
'.delay-200': { delay: 200 }
'.delay-250': { delay: 250 }
'.delay-300': { delay: 300 }
'.delay-350': { delay: 350 }
'.delay-400': { delay: 400 }
'.delay-450': { delay: 450 }
'.delay-500': { delay: 500 }
'.delay-600': { delay: 600 }
'.delay-700': { delay: 700 }
'.delay-800': { delay: 800 }
'.delay-900': { delay: 900 }
'.delay-1000': { delay: 1000 }
'.delay-2000': { delay: 2000 }
'.delay-3000': { delay: 3000 }
'.delay-4000': { delay: 4000 }
'.delay-5000': { delay: 5000 }
duration
Duration of the animation, in milliseconds.
/* Property: duration */
/* Component(s): Ti.App.iOS.SearchableItemAttributeSet, Ti.Media.AudioPlayer, Ti.Media.Sound, Ti.Media.VideoPlayer, AnimatedWithDurationOptions, Ti.UI.Animation, Ti.UI.ImageView, Ti.UI.Notification, Ti.UI.iOS.TransitionAnimation */
'.duration-0': { duration: 0 }
'.duration-25': { duration: 25 }
'.duration-50': { duration: 50 }
'.duration-75': { duration: 75 }
'.duration-100': { duration: 100 }
'.duration-150': { duration: 150 }
'.duration-200': { duration: 200 }
'.duration-250': { duration: 250 }
'.duration-300': { duration: 300 }
'.duration-350': { duration: 350 }
'.duration-400': { duration: 400 }
'.duration-450': { duration: 450 }
'.duration-500': { duration: 500 }
'.duration-600': { duration: 600 }
'.duration-700': { duration: 700 }
'.duration-800': { duration: 800 }
'.duration-900': { duration: 900 }
'.duration-1000': { duration: 1000 }
'.duration-2000': { duration: 2000 }
'.duration-3000': { duration: 3000 }
'.duration-4000': { duration: 4000 }
'.duration-5000': { duration: 5000 }
repeat
Number of times the animation should run.
If autoreverse is true, one repeat means the animation plays forward and backward once.
/* Property: repeat */
/* Component(s): NotificationParams, Ti.UI.Animation */
'.repeat-0': { repeat: 0 }
'.repeat-1': { repeat: 1 }
'.repeat-2': { repeat: 2 }
'.repeat-3': { repeat: 3 }
'.repeat-4': { repeat: 4 }
'.repeat-5': { repeat: 5 }
'.repeat-6': { repeat: 6 }
'.repeat-7': { repeat: 7 }
'.repeat-8': { repeat: 8 }
'.repeat-9': { repeat: 9 }
'.repeat-10': { repeat: 10 }
'.repeat-11': { repeat: 11 }
'.repeat-12': { repeat: 12 }
rotate
Rotation in degrees. See the rotate method for more detail.
Default: no rotation.
/* Property: rotate */
/* Component(s): MatrixCreationDict, Matrix2DCreationDict */
'.rotate-0': { rotate: 0 }
'.rotate-1': { rotate: 1 }
'.rotate-2': { rotate: 2 }
'.rotate-3': { rotate: 3 }
'.rotate-6': { rotate: 6 }
'.rotate-12': { rotate: 12 }
'.rotate-45': { rotate: 45 }
'.rotate-90': { rotate: 90 }
'.rotate-180': { rotate: 180 }
/* Property(ies): rotate ( Negative values ) */
/* Component(s): For the Animation Component */
'.-rotate-0': { rotate: 0 }
'.-rotate-1': { rotate: -1 }
'.-rotate-2': { rotate: -2 }
'.-rotate-3': { rotate: -3 }
'.-rotate-6': { rotate: -6 }
'.-rotate-12': { rotate: -12 }
'.-rotate-45': { rotate: -45 }
'.-rotate-90': { rotate: -90 }
'.-rotate-180': { rotate: -180 }
scale
Scales the matrix by the specified factor. The same value applies to both horizontal and vertical scaling.
Default: 1
/* Property: scale */
/* Component(s): MatrixCreationDict, Matrix2DCreationDict, Matrix3DCreationDict */
'.scale-0': { scale: 0 }
'.scale-1': { scale: 0.01 }
'.scale-5': { scale: 0.05 }
'.scale-10': { scale: 0.10 }
'.scale-25': { scale: 0.25 }
'.scale-50': { scale: 0.5 }
'.scale-75': { scale: 0.75 }
'.scale-90': { scale: 0.9 }
'.scale-95': { scale: 0.95 }
'.scale-100': { scale: 1 }
'.scale-105': { scale: 1.05 }
'.scale-110': { scale: 1.1 }
'.scale-125': { scale: 1.25 }
'.scale-150': { scale: 1.5 }
snap-back and snap-center
Control how draggable views behave when dropped. All are off by default; opt in with classes on the <Animation> object.
snap-back: view returns to its origin when dropped outside a collision targetsnap-center: view auto-centers on the target when dropped on it (usessnapTointernally)
/* Property(ies): snap - For the Animation module */
/* Component(s): Animation */
'.snap-back': { animationProperties: { snap: { back: true } } }
'.snap-back-false': { animationProperties: { snap: { back: false } } }
'.snap-center': { animationProperties: { snap: { center: true } } }
'.snap-center-false': { animationProperties: { snap: { center: false } } }
snap.magnet is not read by the current runtime and is therefore not a supported behavior.
keep-z-index
Prevents the drag system from auto-promoting the dragged view's z-index. Useful when using transition presets where z-order is part of the layout.
/* Property(ies): snap - For the Animation module */
/* Component(s): Animation */
'.keep-z-index': { animationProperties: { keepZIndex: true } }
'.keep-z-index-false': { animationProperties: { keepZIndex: false } }
drag-apply, drag-animate
Use drag-animate (default) or drag-apply to control how drag: and drop: modifiers are applied. drag-animate animates the properties, drag-apply applies them immediately.
/* Property(ies): draggingType */
/* Component(s): For the Animation Component */
'.drag-apply': { draggingType: 'apply' }
'.drag-animate': { draggingType: 'animate' }
opacity-to-*, toggle-visible
Animates opacity and toggles visibility automatically.
/* Property(ies): toggle - For the Animation module */
/* Component(s): Animation */
'.opacity-to-0': { opacity: 1, animationProperties: { open: { opacity: 0 }, close: { opacity: 1 } } }
'.opacity-to-100': { opacity: 0, animationProperties: { open: { opacity: 1 }, close: { opacity: 0 } } }
'.toggle-visible': { animationProperties: { open: { visible: true }, close: { visible: false } } }
zoom-in-, zoom-out-
Animates zoom in and zoom out.
Sets the View's scale to the specified value, then animates it back to 1.
/* Property(ies): animationProperties - scales the View (in or out) and resets it to 100% when the animation completes */
/* Component(s): Animation */
'.zoom-in-0': { animationProperties: { open: { scale: 0 }, complete: { scale: 1 } } }
'.zoom-in-1': { animationProperties: { open: { scale: 0.01 }, complete: { scale: 1 } } }
'.zoom-in-5': { animationProperties: { open: { scale: 0.05 }, complete: { scale: 1 } } }
'.zoom-in-10': { animationProperties: { open: { scale: 0.10 }, complete: { scale: 1 } } }
'.zoom-in-25': { animationProperties: { open: { scale: 0.25 }, complete: { scale: 1 } } }
'.zoom-in-50': { animationProperties: { open: { scale: 0.5 }, complete: { scale: 1 } } }
'.zoom-in-75': { animationProperties: { open: { scale: 0.75 }, complete: { scale: 1 } } }
'.zoom-in-90': { animationProperties: { open: { scale: 0.9 }, complete: { scale: 1 } } }
'.zoom-in-95': { animationProperties: { open: { scale: 0.95 }, complete: { scale: 1 } } }
'.zoom-in-100': { animationProperties: { open: { scale: 1 }, complete: { scale: 1 } } }
'.zoom-in-105': { animationProperties: { open: { scale: 1.05 }, complete: { scale: 1 } } }
'.zoom-in-110': { animationProperties: { open: { scale: 1.1 }, complete: { scale: 1 } } }
'.zoom-in-125': { animationProperties: { open: { scale: 1.25 }, complete: { scale: 1 } } }
'.zoom-in-150': { animationProperties: { open: { scale: 1.5 }, complete: { scale: 1 } } }
'.zoom-out-0': { animationProperties: { close: { scale: 0 }, complete: { scale: 1 } } }
'.zoom-out-1': { animationProperties: { close: { scale: 0.01 }, complete: { scale: 1 } } }
'.zoom-out-5': { animationProperties: { close: { scale: 0.05 }, complete: { scale: 1 } } }
'.zoom-out-10': { animationProperties: { close: { scale: 0.10 }, complete: { scale: 1 } } }
'.zoom-out-25': { animationProperties: { close: { scale: 0.25 }, complete: { scale: 1 } } }
'.zoom-out-50': { animationProperties: { close: { scale: 0.5 }, complete: { scale: 1 } } }
'.zoom-out-75': { animationProperties: { close: { scale: 0.75 }, complete: { scale: 1 } } }
'.zoom-out-90': { animationProperties: { close: { scale: 0.9 }, complete: { scale: 1 } } }
'.zoom-out-95': { animationProperties: { close: { scale: 0.95 }, complete: { scale: 1 } } }
'.zoom-out-100': { animationProperties: { close: { scale: 1 }, complete: { scale: 1 } } }
'.zoom-out-105': { animationProperties: { close: { scale: 1.05 }, complete: { scale: 1 } } }
'.zoom-out-110': { animationProperties: { close: { scale: 1.1 }, complete: { scale: 1 } } }
'.zoom-out-125': { animationProperties: { close: { scale: 1.25 }, complete: { scale: 1 } } }
'.zoom-out-150': { animationProperties: { close: { scale: 1.5 }, complete: { scale: 1 } } }
Titanium Classic equivalents
Classic projects do not load these classes. Pass the equivalent native values to createAnimation():
| Alloy utility | Classic property |
|---|---|
duration-*, delay-* | duration, delay in milliseconds |
ease-in, ease-out, ease-in-out, ease-linear | curve: Ti.UI.ANIMATION_CURVE_* |
repeat-*, autoreverse | repeat, autoreverse |
rotate-*, scale-*, origin classes | rotate, scale, anchorPoint |
| Position, size, opacity, and color classes | Native top, left, width, height, opacity, and color properties |
open:*, close:*, complete:* | animationProperties.open, .close, .complete |
children:*, child:* | Global children and per-view animationProperties.child objects |
bounds:* | Constructor bounds plus optional view.bounds overrides |
vertical-constraint, horizontal-constraint | view.constraint = 'vertical' or 'horizontal' |
drag:*, drop:* | Constructor or per-view draggable.drag/drop objects |
drag-apply, drag-animate | draggingType: 'apply' or 'animate' |
snap-back, snap-center | animationProperties.snap.back/center |
keep-z-index | animationProperties.keepZIndex |
Resources/app.js
const { createAnimation } = require('lib/purgetss.ui')
const motion = createAnimation({
duration: 200,
delay: 50,
curve: Ti.UI.ANIMATION_CURVE_EASE_IN_OUT,
scale: 1.1,
animationProperties: {
open: { opacity: 1 },
close: { opacity: 0 },
snap: { back: true, center: true },
keepZIndex: true
}
})
The runtime has no universal 200 ms animation default. The value above is explicit. See the Classic object reference.