Switching between flexible layouts keep same place in timeline

Responsive Flexible Layouts
1

Hi there,

I have a few flexible layouts for various sized devices, for example iPad Portrait / iPad Landscape.

My question is when switching between layouts turning the iPad from portrait to landscape is there a way to keep the same position in the timeline. I have a slideshow of images so switching between layouts means the slideshow is reset back to the starting image rather than remaining where the user left off.

The timeline is the exact same on both layouts so I wondered if this would be possible.

Thanks for any suggestions.

2

Use a persistent Symbol. They prevail across scenes, layouts and breakpoints.
Hope this helps.

1 Like
3

Thanks @MaxZieb … Looking into this now and think its going to work perfectly!

4

I have got it to work just great, however and I don’t know how possible my next question will be as I understand with persistent Symbol’s they cannot be different from one another.

But is there anyway to have the landscape version images landscape and the portrait images portrait.

So changing within the symbol the image depending on the flexible layout orientation.

Thanks again.

5

Well if your resources differ so much from layout to layout and your timelines are exactly the same you can do the following:

timelines.hype.zip (21,0 KB)

There are two functions called on scene information. Add more named timelines if needed or just work with persistent symbols inside the layouts.

1 Like
6

Max, thanks so much for this!

Having a play around with this now… Looks like you have hit the nail right on the head here!

Thanks again!

7

Hi Max,

Thanks again for sharing a template document.

A quick question I now have is, can I use and access timelines within symbols, instead of using the ‘Main Timeline’?

My project is one long webpage where a small section of it has an image slideshow. I have this slideshow within a symbol, which has a timeline that controls it.

The reason I created it this way was I wanted to use the swipe gestures for the iPad versions which when swiping left or right would only control the symbol (slideshow) and no where else on the page.

Will it be possible to have the same result as the example you sent but using timelines within symbols instead?

Thanks again for all your help.

8

Try this

timelines symbol.hype.zip (21,7 KB)

3 Likes
9

Oh Yes!! Max you have done it!

I shall now apply this into my existing project…

Thank you so much.

10

Your welcome … here is a version that is more generic. It still only the “Main Timeline” but now direction, isPlaying and time is restored but it requires that the symbols that need to be synced have the same classname. This way the functions can handle more then one timeline.

timelines-symbol-generic-2.hype.zip (62,5 KB)

PS: if you add “autostart” to a symbol (remember on both ends) it will autoplay. The square in the example has it’s own timeline and starts on click.

2 Likes
11

Thanks again for your help on this Max and for creating the latest more advanced example.

I have worked the example you linked into my original project and everything is working brilliantly!

Thanks.

Ollie

1 Like
12

I was wondering how this might work for converting a site that has many animated elements (e.g. my own site at dandreti.com - resizing currently starts the timeline over.)

Would this be a rebuild scenario, or is there a clever way of using the Timeline layout functions to achieve this during a resize event? (https://tumult.com/hype/documentation/3.0/#layout-functions)

13

I don’t think you really need to use the layout functions; those are mainly for determining or overriding the layout choice the engine makes. @MaxZieb’s solutions work on load/unload events which is the appropriate time.

In your case, since the top-level Main Timeline is the controlling part, you would just need to change his example to run On Layout Load/Unload, and then instead of referencing the symbolInstance you can use the straight hypeDocument API versions for the timeline functions.

(That said, the animations still make heavy use of sub-symbol timelines and symbol actions… There might be cases where the playback states of these aren’t properly restored. We did make some changes in Hype v4 to improve this so it would more match expectations. Because of the complexity, I think the only way to know to test!)

1 Like
14

Thanks that’s super helpful, I’ll get tinkering.

Fortunately synchronising the sub-symbol timelines doesn’t matter in this design, but I noticed a good solution earlier in the thread should I need that in a future version.

I’m looking forward to see what V4 can bring, especially as there were some effects that I excluded in this version (but have seen implemented in the v4 animation challenges.)

1 Like