Triggering different timelines in hype for Room Designer App (1.2 MB)
Hello Hype users,

I am creating a complex interactive app which would like to be made entirely by using Hype Pro. This will be for an interactive Room designer where the user will be able to add and match different moldings combinations on the room.

I am using a Main Timeline which contains the different categories or menus. Each category is a button. Each of these buttons trigger or load its own timeline.

My issue here is that I can’t seem to “unload” a timeline so it can load another. Seems that is playing the same timeline from the beginning. I have attached the files for more clarification.

Thanks in advanced!

Timelines are conceptually more a stream of animations that get executed (and can run in parallel) than something to load or unload. If you’re looking to undo the changes made by a timeline, you could run the timeline in reverse, or use relative timelines which can be setup with keyframes to undo certain changes.

Thanks Jonathan. So maybe using timelines is not the right approach for this project. Maybe scenes or symbols instead? From what I understand they can also be dinamically load using JS.

Scenes are probably the easiest approach and conceptually jive with the organization.

That said, you could achieve more interesting animation effects with relative timelines. As an example, see the WooGrit invitation in our gallery. In the “where” area you can click on any image and the existing image will go back in place. You could use this same technique; the sample .hype file is in the gallery to see what it is doing.

Thank you, I will try your suggestion instead. I might have to change the design around to accommodate relative timelines but it shouldn’t be too bad.