Jump to content
Search Community

Mask when elements slide in?

Eugene Rayner test
Moderator Tag

Go to solution Solved by PointC,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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 comment
Share on other sites

  • Solution

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 comment
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
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...