Looping around a value range

[donny]

Hi all, 

 

I'm animating both back and forward between 4 set values (0, 8, 16, 24). These values are part of the range 0-34. When I'm at value 24 and need to move forward, the animation needs to play to 34 then return to 0. Also when at 0 and need to move back, it would need to play back to 34, moving to value 24.

 

What's the easiest approach to achieve this loop? 

I'd also like to know how to apply this in the AS3 framework please. 

 

Thanks! 

[Carl]

Hi and welcome to the GreenSock forums,

 

On the HTML5 / JS side we have the ModifiersPlugin which is perfect for this.

See second demo on this page: https://greensock.com/modifiersPlugin

 

Prior to the ModifiersPlugin you would do something like tween a value of a generic object, use and onUpdate to clamp that value (force it into a range) and then apply that modified value to the property of the element you want to see moving.

 

Below is a "non-modifiers" version of that general concept. You'll notice that I'm tweening x to -1000, but the box only moves in a range from 0-100.

 

See the Pen jKJENr?editors=0010 by anon (@anon) on CodePen

 

We don't have a ModifiersPlugin for AS3 as we stopped developing and supporting the AS3 version of GSAP many years ago.

However, you should be able to do the same thing with an onUpdate callback and generic object in AS3. 

 

 

 

 

[donny]

All works well thanks Carl, much appreciated.