What I meant by masking was a group acting as a mask when in a hidden state and animated. Pretty much what @Hrishikesh said. Sorry for the confusion.
No problem. Tnahks for the tip!
While I haven’t experienced these visual artifacts my self, I rarely paste directly from illustrator to Hype.
I copy the shapes from illustrator and then paste the SVG into a hype rectangle, that seems to get rid of the artifacts as well, and you can edit the fill color directly with Hype or with javascript.
1 Like
I remember having the need to mask a video in the past, and after many freaky experiments with CSS and JS, It finally came to me the simplest solution: a mask over the content:
P-Mask.hype.zip (12.6 KB)
While there still are situations where this is not going to be enough, it might solve most of the needs for a masking solution.
Still, I believe with some cleverness, it still might solve most problems, if not, there is a plugin for After Effects called Bodymovin that support some masking features.
3 Likes
Well, @Davirus that’s not exactly how it was done, actually far from it.
What it was a pain-staking process of manually animating the “hidden” group mask and the letters/number PS5 individually consisting of many parts per letter/number to get that written effect. I don’t have access to the original hype doc but I will share it once this global quarantine passes.
Oh, no, of course not, I am not implying that, but is a more simple and quick solution which also requires little to none coding skills to accomplish.
I also mentioned that it might not be enough for some cases, but should be more than enough for anyone looking to not expend more than 5 minutes in creating a masking solution.
Still, it would be interesting to see and study your hype file, knowledge is power
The thought process was to reveal the letters and then use original colors to accent/highlight the letters individually in an organic and gradual progression with every color moving within each and every letter. Believe me, it wasn’t easy to pull this off. That said, sometimes you have think outside of the box when using Hype because it is not an apparent from the get go effect. You almost have to force yourself to do what it is you set out to do in your mind and only use hype. Challenge yourself to make something that hype wasn’t really meant for. Thats basically how I think when working in hype, I always challenge the app with whatever I have in mind. Some people use code to accomplish things but whatever the case maybe you can solve it.
2 Likes
@Davirus, @jlbonin Finally I was able to login remotely to my work Mac and send the file to myself. As promised here’s my spin on the ps5.hype.zip (60.0 KB) . As you can see the process is a bit more intricate than the one you have. The background is not a clipped from say Illustrator with knocked out text this way I have more control over the animation of the background or if no background preserving the transparency. Enjoy!
5 Likes