Hey,
In this sample image right and left elements start sliding from center to the corners and there is a smooth “speed effect”. Can you advise me how can I create this effect in Hype?
Hey @gretag
Difficult to see what elements you’re referring to and what you mean by “sliding form center to the corners”.
Can you elaborate a bit more? Perhaps show a video of this in motion? or a link to where we can see it?
I did a small Hype animation for a recipe site - a fun element with no real purpose whatsoever but it does what you’re talking about (more or less):
Check out the mouse icon at the lower right of the card, then turn your speakers up and click on the paw icon. After clicking a couple of times I guarantee your significant other will show up, demanding to know what the hell you’re doing in there.
I clipped the mouse in Photoshop and output it as a PNG. I then took the same file, greatly extended the width of the document, duplicated the mouse layer a couple of times (the second to use and the third as a backup), then did a motion blur on the underlying mouse. As it stretched out the pixels while adding transparency it can become faint, so I duplicated the blur layer.
I then isolated the mouse (select all, cmd+<, cmd+>) and used this to create a new mask channel. I duped this, as well. I took one of these channels, set the gradient tool to black and white and solid to transparent. Starting at the center of the mouse, I created a narrow gradient. This made the mouse solid at one side and transparent at the other side. I then took the duplicate and did the same in the opposite direction. As the mouse dashes in and out, I need two of these, one for each direction. I did the same with the grape, then merged it into the blurred mouse.
I went back to the motion blur layer, duped it and applied the gradient mask as a layer mask, I took one of the mouse layers and did the same. This created an image of a mouse that was sharp on the left side and blurred into a streak at the right. I then repeated this with the reversed gradient and applied it to the other mouse and blur image. I then merged the appropriate channels and exported the two results as PNGS, plus I saved the mouse on its own as a third PNG.
To conserve space, I then opened the two PNGs in Photoshop, used the above isolation trick to select only the existing pixels, then used the crop command to eliminate the wasted space, and resaved the PNGs.
From that point, I created the entrance by setting keyframes in Hype to have the blur-right object appear for a few frames and fade while the mouse object popped into site. For the exit, I did the same but using the blur-left object and no mouse. I added the voices of the cat and Mr. Howard by making screen recordings from YouTube, then generated the audio files with Audition.
By the way, this is a site I created for my wife long before the days of responsive. Check out the recipes. The North African Spicy Chicken (with the Persian rice) could support a restaurant all on its own.
1 Like