I’ve read in a few places on the forum that Hype doesn’t have a multiply (transparency) setting allowing you to position things on top of each other and overlay them. I tried inserting a png into my animation which I’d saved with the multiply setting on (I created it in Illustrator) but it was still opaque. Does anyone have any work around for this? I’ve been wrestling with Photoshop to export a png with a multiply effect but it’s being very stubborn! Oh I should probably say what I’m trying to achieve is 2 circles of different colours overlapping to create a new colour. (it’s easily done in after effects)
P.S. really love the software, great to be able to get HTML animation so quick!
The other downside… To use mix-blend-mode, all of the blended items need to be within the same container. Try adding this to your document header. It’ll cause everything on your stage to blend. I wasn’t able to get multiply to work in Firefox. Didn’t spend much time on it though.
Your code worked brilliantly, it produced the multiply effect as I needed (I tried a lot of other code snippets that failed!) As you said, the downside is it multiplied everything, meaning I lost the white text I was using in the animation. I’m going to try and do the text and circles as separate animations to see if this works. Interestingly my multiply worked fine in Firefox!
I was wondering, I’m using the animation in Squarespace, and it’s playing hell with my site, I can’t seem to upload the Hype file to my template and get it working.
Have you ever used Hype in Squarespace? If so, any tips?
Glad it worked for you. You might have some luck playing with a symbol as well. That’s a container but I think it divides each element into a separate container… Quick tests revealed that it probably won’t work:( This might be unintended. Could be worth a feature request to have them wrap the output of a symbol under the same container. This would let you just blend a group of things.
I haven’t any experience with squarespace and have only been using Hype for a week or so. Guessing it’s a file reference issue. What errors appear in your browser console?
Cool yeah I might put in a feature request for it, I think I’ll definitely write one for the multiply tool in Hype, as this would be absolutely ideal for what I need (plus like you showed me CSS has recently included mutliplies + blending in its features) so I think it’s definitely essential.
I think you might be right about the file reference, as Squarespace doesn’t let you host anything internally. I can upload my .js file into it but getting the actual animation in there is killing me! I looked up some guides on it and found this http://hype.desk.com/customer/portal/articles/171479-exporting-to-squarespace which is (quite frankly) appallingly unclear haha. I’m attempting to use Filezilla, I guess this is the best way forward?
Yeah to be fair it is quite clear I’m just really not sure how to work Filezilla, plus I’m kind of reluctant to install it on my work computer as it gave my laptop some weird extensions (hopefully not viral!) Have Tumult users been using Filezilla for this kind of thing for a while?
Then the point I get stuck on in was files to upload to Filezilla. I’m able to upload the .js script to Squarespace, but do I upload this to Filezilla instead, along with the html file?
Just an update, I actually managed to get the 2 shapes to multiply directly from Hype, here’s the html file:///Users/fish/Documents/Jamie/Fish&Co/Squarespace%20website/illustrator/HTML5/CIRCLES9.04.15v2.html
However, as stated before all the text multiplies so I’ve had to put the text black for now while I work around it. Honestly, I have no idea what I did but whatever it was it worked! I think it was something to do with what you said, Steve, about converting both shapes to 1 symbol (together). I think I might have played with the ‘Edit Element’s Inner HTML’ before I did this.
Anyway, as a complete novice all the help I’m getting on here is absolutely fantastic and I’ll be recommending Hype to plenty of people