Animation Timelines

Animation
1

Hi Guys,
I am new to Hype. I was trying to create a simple interactive animation to practice. Unfortunately it seems my Animation Timelines is not working.

I have two buttons. If I click B1 it should display B1 text. If I click B2, it should display B2 text. Problem is when I run the animation both B1 and B2 being displayed even though I put those into different Timeline as oppose to Main Timeline.

Any idea?

please download the file from here- https://www.dropbox.com/sh/a4e6li8f7xan2k5/AABgE7q9JuG9Z3P1F-QMQYP9a?dl=0

Thanks in advance.
Asif

2

You have three animation timelines.

1, main timeline
2, B1
3, B2

The elements are the same objects regardless of timeline that tries to control it’s properties to perform an animation.
Look at the timelines as a tool to organise chunks/layers of operations in a single scheme.

You first need to set the text opacity in the main timeline to 0.

Then in each B1 and B2 timelines make sure the opacity matches what it is in the Main time line (0) for the start keyframe and the end keyframes are 100.

loosely speaking… In most cases like this you will always set the main timeline first as the other timelines take their start properties for elements from this. ( In some cases you will override this, but thats a whole other ball game )

3 Likes
3

Thanks MarkHunte. It solved my problem :thumbsup:

I basically came from Flash and still thinking in Flash-way :smile:

I am also trying to work out how to create loop animation like MovieClip (Flash) which later can be used in timeline. any tutorial?

cheers,

4

Not sure what that is as I never used flash..

But just do a search on site for 'loop animation'

5

Loop animation -> loop timeline ->

  • add a keyframe at the end of the timeline you want to loop
  • add a new action in that keyframe: “go to time in timeline(name)”
  • set the desired time
  • add in that same keyframe another action: “continue timeline(name)”.

You’ll see you can control other timelines through this and even loop timelines backwards.

Done. :grinning:
HF!

1 Like
6

Thanks MarkHunte for your help. Really appreciate it.

7

Thanks Rick4F. It worked :grinning::+1: