Share Posted March 21, 2017 Hello there, How would I go about creating 'masks' on the sides of my page where the elements slide in? I see this done very well on this infographic https://www.ceros.com/examples/visage-data-storytelling/ Thanks in advance EDIT: Obviously I am new to use lots of tweens on 1 page - is there a way I can minimize my code? Cheers See the Pen gmeXxY by erayner (@erayner) on CodePen Link to post Share on other sites
Solution Share Posted March 22, 2017 Hi erayner_45092 Masking and clipping can be quite frustrating and there may not be an easy answer to your question. Clip would probably work well, but is deprecated and clip-path seems to be somewhat problematic in some browsers. When it comes to universal support for masks and clips, we're in the wild west here. Here's an older CSS tricks Article, but has good info: https://css-tricks.com/clipping-masking-css/ It also depends on what you'll be using for your design. Are these standard DOM elements or will you be using SVG or perhaps canvas? I personally find masking in SVG quite easy compared to the available options for a good old fashioned div, but that's just my opinion. I looked at the demo from your question and honestly, if it were me, I wouldn't use a mask. I'd probably just use a couple of fixed position divs to serve as my masks. You can get away with that if you're using a plain colored background like they did. Just plop a white div on each side of the content and give it a higher z index than everything else and then your animations will come from underneath those divs and look perfectly masked. It's a cheat, but it's easy. As far as your question about reducing your code - I'm only seeing a few tweens in your demo so it doesn't look like it's too much to me. You do have two tweens doing the same thing on two different target elements so that would be a great place for a stagger which can reduce some code. Hopefully this info helps. Happy tweening. 2 Link to post Share on other sites
Author Share Posted March 23, 2017 Thanks for the tips! Ill have a go with the fixed position divs -> that's a good, easy work around. And thanks for the stagger idea, I didn't realise I could stagger animations. Cheers 1 Link to post Share on other sites
