I have been creating interactive projects for over 20 years and a lot of that time was spent in Adobe Flash and later HTML5. A large part of that work used programmatic tweening in actionscript and javascript. One of the main tools I loved to use was called GreenSock which is still around today for html5 projects. Inspired by that tool I have created my own version in python to use with TouchDesigner.
Setup
Place Tweener tox in your project root and make sure the Global OP Shortcut is set as "Tweener".
How to use
Tweens calls are added to a global array to be processed in a frame loop. Once the requested tween has completed it will be removed from the array unless it is set to repeat. There are two types of tweens, To and FromTo. The difference is a To Tween will take the current value as the start value and tween towards the requested end value but a FromTo Tween allows you to set the start and end values. When a tween function is called an id is returned incase you want to target and kill that tween at any time before it completes. You can also kill all active tweens by calling the KillAllTweens() function.
Documentation
op.Tweener.To(targetOP, toParameters)
op.Tweener.FromTo(targetOP, fromParameters, toParameters)
op.Tweener.KillAllTweens()
op.Tweener.KillTweenByID(id)
Parameters
- Any pars variable including custom ones. Example: tx, ty, tz, x, y, w, h, opacity, layer, display, etc...
- duration - How long the tween animation should take in seconds
- delay - How long to delay start of animation in seconds. This is useful if you want to add multiple tweens at once and offset their animation like buttons sliding in with a staggered start.
- easing - set the style of easing from the available list:
- linear, easeInQuad, easeOutQuad, easeInOutQuad, easeInCubic, easeOutCubic, easeInOutCubic, easeInQuart, easeOutQuart, easeInOutQuart, easeInQuint, easeOutQuint, easeInOutQuint, easeInSine, easeInOutSine, easeOutSine, easeInExpo, easeOutExpo, easeInCirc, easeOutCirc, easeInOutCirc, easeInElastic, easeOutElastic, easeInOutElastic, easeInBack, easeOutBack, easeInOutBack, easeInBounce, easeOutBounce, easeInOutBounce
Tweener Easing Examples
- linear, easeInQuad, easeOutQuad, easeInOutQuad, easeInCubic, easeOutCubic, easeInOutCubic, easeInQuart, easeOutQuart, easeInOutQuart, easeInQuint, easeOutQuint, easeInOutQuint, easeInSine, easeInOutSine, easeOutSine, easeInExpo, easeOutExpo, easeInCirc, easeOutCirc, easeInOutCirc, easeInElastic, easeOutElastic, easeInOutElastic, easeInBack, easeOutBack, easeInOutBack, easeInBounce, easeOutBounce, easeInOutBounce
- repeat - How many times should it repeat? Default is 0 and -1 will repeat forever
- pingpong - Once animation plays to end value it can reverse and play backwards by setting True. Default is False.
- onRepeat - Allows for python code to be executed on repeat
- onComplete - Allows for python code to be executed on completion of the tween.
Examples
# To Tween op.Tweener.To( "geo1", { 'tx': 2, 'rz': 90, 'rx': -180, 'duration':1.7, 'easing':'easeInOutSine', 'repeat':-1, 'pingpong':True })
# From To Tween op.Tweener.FromTo( "container1", { 'x': 0, 'y': 0, 'w':150, 'h':150, 'opacity':1, 'Rotate':0 }, { 'x': 250, 'y': 250, 'w':1, 'h':1, 'opacity':0, 'Rotate':360, 'duration':1.5, 'easing':"easeInOutSine", 'repeat':0 })
# Kill All Tweens op.Tweener.KillAllTweens()
# Store Tween ID reference for later use to kill tween myTween = op.Tweener.To( "geo1", { 'tx': 2, 'rz': 90, 'rx': -180, 'duration':1.7, 'easing':'easeInOutSine', 'repeat':-1, 'pingpong':True }) # Kill a Tween by ID op.Tweener.KillTweenByID(myTween)
Update Log
- v1.1 - Fixed bug with FromTo and pingpong not working correctly.
- v1.2 - Added Tweener UI support
- v1.3 - Added Frame based toggle so you have the option of frame vs time based tweens. Frame based is ideal if you need to uncheck realtime to save out your movie / images and it causes performance slow downs.
Asset Downloads





