Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Sign in to follow this  
erayner_45092

Mask when elements slide in?

Recommended Posts

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

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.

:)

  • Like 2
Link to post
Share on other sites

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

  • Like 1
Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.

×