Bidirectional looping scroll

This is a very basic old-school keyframe method of creating a scrolling animation that repeats endlessly in either direction. Examples are provided with one object and with two objects.

EndlessLoop.zip (124.2 KB)

Notes:

• The scene is set to relative (scene width checkbox > 100%).
• Timeline keyframes animate the objects from left to right with two seconds between enter / exit and center.
• The objects are auto centered and within a group, with the group object stretched to fill the stage and expand to fill.
• The animation uses two complete left > right cycles.
• Depending on their relative horizontal positions, each object has either one or two extra keyframes nudged one frame forward that reset the animation exactly one cycle off.
• The first and last timeline action keyframes make the cursor jump to the center of the timeline.
• The middle three timeline actions pause the animation.
• The group has a drag action applied to control the timeline. The drag speed is affected by adjusting the balance between the length of the timeline, the relative width of the browser window, and the and the rate of speed of the drag. Adjust the drag rate in the drag action as needed.

Slide Shows

A variety of this method can be used for slide shows as well, but for bi-directional slide shows you would need to insert a couple of duplicate photos and set specific timeline animation keyframes so that the cursor could jump to the correct in and out points. Unidirectional slide shows are easy because all you need to do is place a duplicate of the first photo at the end and set a timeline action at the last frame to reset the cursor to the corresponding animation point of the first photo.

2 Likes