You can see the basic functionality, click on a picture show the text, roll off, text closes, simple enough for the desktop but of course no rollover on tablets and phones.
I know I can set each timeline to reset all other timelines to zero effectively closing all boxes before a new one opens but this is quite snappy as in any open box doesn’t smoothly close it just resets to it’s fully closed state instantly.
What I would really like is for any open box to scroll shut as in a reverse of the way it opens but I obviously need a way for Hype to tell which box is open and then close only that. I presume it’s a javascript thing but my skills aren’t good enough to write that from scratch.
I can set the timelines to all close from an open state but that requires opening all of them first, again not a tidy solution
I’ve looked at the various accordion based solutions in the forum which would probably work if I just had one column but across two or three can’t see how they could work together.
If anybody could point me in the right direction I would be most grateful!
Use Continue Timeline… and set it to play in reverse, also not set to restart the timeline. If the timeline is then at 0 nothing will happen.
Use Relative Keyframes with timelines that do the reset. The first “relative” keyframe on a relative timeline will be whatever state it is currently at, so if it is closed and you animate to a closed state, effectively nothing happens.
OK whilst I thought I’d cracked this and can get it to work as i want from column to column i.e. clicking between 1, 2 and 3 works well Going vertically as in 1 then 4 then 7 etc just isn’t working. I seem to be getting unpredictable results when clicking. Starting with 1 fine, then 4 fine, then 7 fine but going back up vertically in the same column ends up with the lower images overlapping. Cant really see why it works one way but not another.
I’ve only setup 1-7 so far so ignore below that but sen to have got myself in a bit of a tangle.
Sure I’m missing the obvious and will kick myself but could do with a bit of help!
Ah, I see more of the complexity now - basically you are not just opening and closing individual items, but they also have an effect on items below. You’re pretty close to a working solution actually. Here’s what you’ll want to do to get this working:
remove the relative check box on your 1 lewisham timeline in the Scene Inspector. (this isn’t needed with your approach and will lead to wrong results)
For the image/open actions, have continue timeline+play in reverse+no can restart timeline for all vertically oriented thumbnails, except the one you are opening.
After those continues, use a continue timeline+no play in reverse+no can restart timeline for the timeline you are opening and the base timelien
For the trigger elements use continue timeline+play in reverse+no can restart timeline for both the appropriate timeline and base.
You need to always use a continue so that the playhead is not reset. You need to have the opening timelines last, as the last timeline “wins” which properties it gets to control, and you want this to force open items.
There is one simplification you could optionally make - you could make a Custom Behavior that has all the play in reverse timelines to act as a full close. So then each element that runs the open command would just use the Trigger Custom Behavior action for this, and then just the two continue timeline actions for the base and the appropriate timeline.
Glad you got it working! It is a pretty neat document/interactivity structure. If you’re so inclined, I’m sure others would benefit if you posted the final solution it in the Animation Gallery section of the forums.
Absolutely, more than happy to. Praise indeed that you think it’s worth sharing. I’ve used many a demo or example from the forums to get things done so pleased to be able to return the favour. Custom behaviour is very powerful, never used that before but it gives me lots of ideas to speed things up.
I spent ages trying to get the best solution for accordions in Hype. In the end I’m fairly satisfied with the solution in the link I’ve given below. Also the site gets as close as I can to replicate a “native’ feel in Hype. Client was really happy. Swiping is still an issue but hopefully next Hype upgrade will help ! http://app.woofandgo.com
Thanks Jonathan, I think you guys have built an amazing piece of software which becomes more capable the more I use it. I’m building my business around it
Dan
