I have an image that I need to move from 0 to 100 and back again and again. How can I do that only by using the timeline? Without script?
In the Demo project just below I assumed “0 to 100” refers to opacity… but it could be changed to other properties. Please reference Fig.1 below with the following description of the settings.
Hype Demo Project: Timeline Animation Loop_JHSv1.hype.zip (12.2 KB)
Timeline Actions
• 1st keyframe ( “0” seconds) set to “Start Timeline”
• 2nd keyframe set to “Continue Timeline” with the “Play in Reverse” option checked.
Opacity is 100% at “0” seconds and 0% at 2 seconds.
Fig.1
But that will make all the other items present there to animate in the same way. Is their any way to make a particular symbol to loop, but not the other ones. Is their a concept of timeline only connected to a particular symbol, in hype?
Create a new timeline for the element You wish to animate - i.e. one that runs separately from the “Main Timeline”. See the Documentation re: Timelines here.
Look for this section (screen shot shown here):
2 Likes
Here is the updated version, set to run a timeline called “Opacity Change”:
Timeline Animation Loop_JHSv2.hype.zip (16.0 KB)
The “Main Timeline” begins playing by default (You can pause it); but other timelines need to be triggered in some manner. In this version clicking on the square starts the timeline “Opacity Change”.
When You create keyframes You need to make sure they are set to trigger the correct timeline (double click the keyframe to set Timeline actions).
3 Likes