Animation keeps reseting/restarting on scrolling down?

scrolling

(Steven Seal) #1

Hi all,

Below is a link, I know it’s something simple, but I just cant’ figure it out.

http://127.0.0.1:49940/preview/11F82D16-E19D-4CC2-907F-C85D70933BA3-18638-0000007DE0FEE5E6/index.html

The headphones at the top are just placed in a group to keep it centred on page scale, but no ‘Viewport’ Actions are used.

The wire headphones below have a viewport action of ‘Start timeline’ on enter viewport, but I can’t stop this one resetting on scroll down.

I’m keen to learn this programme in tandem with Sketch, and I’m keen to find people willing to help when I get stuck!

Cheers

Steve


(Mark Hunte) #2

The link you have posted is only viewable on you computer. It is the preview run by the built in Hype.app server.
We cannot link to you computer.
Please post the zipped up Hype project instead. Even if we could see the HTML page it would not be very useful for us to help as we cannot easily see what you have constructed and how…


(Steven Seal) #3

Thanks for the update! Sorry, I thought it was like Sketch Cloud. I’m feeling like a right Muppet now!

Upload Responsive Test.zip (440.8 KB)


(Steven Seal) #4

Cheers Mark, appreciate your input and time.


(Mark Hunte) #5

So this is probably an easy fix.

And if I understand what you want then,

1, place the wired headphone animations on it’s own Timeline.
2, Add another enter viewport trigger element like a rectangle across the scene. In the example below I have one that shows up as a red line. But for the real one you can set it to no colour and no border so it is not seen.

3, The Enter viewport should be set to continue the wired timeline.

Using continue will not ‘Start’ the timeline the next time you scroll the trigger into view because we are on continue and there is nothing else on the timeline to continue to.

Having the wire animation on it’s own timeline also frees you up on over complicating the Main Timeline.

Upload Responsive Test_MHv1.hype.zip (363.3 KB)

p.s, I meant post a zipped copy of the actual Hype doc, like the one I have posted. Instead of an exported one. :wink:


(Steven Seal) #6

Wow, I didn’t actually expect you to fix the issue! That’s so kind Mark, really made a big difference.

I can now see the power of the timeline feature. Not sure why all the items/objects show up on each timeline? Tried to delete the wired headphone from the Main timeline, it disappeared from both?

I’m going to post another question about the possibilities of Hype without knowing/using code, any answers on this would be great Mark

Have a marvellous day!


(Mark Hunte) #7

If you remove an element, you remove it from the scene because the Element is a real object on the Scene.
The Elements are NOT in the timelines.

All you need to do is change the way you are thinking about the Timelines.

Look at it as the Scene holds the Elements.

The Elements are objects on the Scene. Like real objects.

The Timelines are just visual aids for us to see and control different timings of changes to Elements properties ( Animations)

The Timelines are just break downs for us to control the element animations in fractions of time.

Having multiple timelines means we can layer these fractions of time on top of each other.

Each element on a scene can be controleled by any or all of these layers of timelines.

But remember the timelines are for us to control the element properties at any given time on any given timeline. They do not contain the Elements. The Scene does.


(Steven Seal) #8

Thanks again Mark. I think my head is stuck in After Effects timelines, but yes, I understand the difference now!

Cheers.