Hello Hype community, this is my first post in this forum, so I introduce myself: My name is Richard and I’m not a professional designer, actually I’m a musician and I’m making my homepage with tumult hype because it is quite easy to use and it has all the features I need.
I have no clue about programming but it seemed very easy to me to create some animations for my homepage with Hype:
I’m using invisible HTML-widgets (on different timelines) which shall appear only at the last frame of an animation. But in previews in all browsers and also on my online homepage you can “see the invisible animation” moving. I enabled the visibility on all HTML-widgets only on the last frame but you can still see how the videos are moving before they appear on their final position although their visibly is disabled. Is this a known bug or is there an easy way to get rid of this? Please consider that if you suggest some scripts, that I don’t know how to use them because I have not the time to deal with it.
You can have a look at my homepage here (only for desktop so far): http://richblaha.com
If you click one of the preview windows, the corresponding timeline starts and I want each film (html widget) only to be seen when it arrives at its final position. Sorry for the repetition, I’m not sure if I can explain it that good in english.
It looks like you are animating from some off screen position to the final position, but do not want to show that movement? If so, you can change the timing function to be Instant. Please see this section of the docs for more about timing functions.
You could also instead of moving the HTML Widget, animate the Display property (in the Visibility section of the Element Inspector) from hidden to visible.
Hey Daniel, thanks for your response. Took some time as I didn’t have time time but here’s the zip file. I guess you will be shocked how I did it as I just have no clue what I did As it is that big I’m sending a Wetransfer link: https://we.tl/t-VLOwD8RjEF
Hope you can help, thank you!
Since your document is very complex, can you please identify the specific element on the timeline that is doing the moving that you do not want to take a further look?
Part of it also might be that you are using relative timelines and I notice in some uses these also do not have instant timing functions. So you may either want to change those timing functions or disable the relative timelines in the Scene Inspector.
Hi Jonathan, it’s been one month now and I changed everything like you said. And it works really fine. You can have a look: richblaha.com
I still need to change the X (back to main timeline) on each timeline but that’s not such an issue.
There’s only one thing that disturbed me a bit. When the site starts after it’s loaded somehow it stuck somehow. It used to be a very fluent animation before. But that might be my computers or the browser?
Anyway, thanks a lot for your help! I really appreciate it, though I’m responding that late! Cheers!
I manage to overlay multiple content(s) by not clicking the big ‘X’. It results in a rather messy look. I think that from a user point of view you cannot expect that guests of your site click the ‘X’ to avoid this messy look. That should be your work.
So you might want to consider to change that if a square is clicked, the timelines of all the other squares are set/put back to their original starting points.
Thanks for the advice! I tried that but unfortunately I don’t know how to do it as each timeline is individual. Or do you mean an invisible square instead of the big “X” all over the screen in each timeline?
I don’t recall what it was like before, but I do agree the initial load framerate is not great! If you open up the web inspector of Safari or Chrome and look at the Network tab (you’ll need to make sure it is open first) you’ll see there’s a crazy amount of activity loading iframes, video, and audio. I suspect the computer is just quite busy with all of that - if you can reduce what it is loading initially and reduce usage of HTML Widgets/iframes, that will help a lot.
Well this is an approach. It probably can be done with JS but I can’t wrap my brains around that (I tried) so here is my way to Rome for launching individual timelines in one scene.
As it is that big I’m sending a Wetransfer link: