sarthak950 Posted January 27 Share Posted January 27 Hey, i need help to https://www.ubisoft.com/en-gb/game/far-cry/far-cry-6 recreate the mask effect of farcry6 website i can do this with clip-path but that is not don't give complex borders or will be harder to maintain they are using a mask but i am not able to animate that Thanks Link to comment Share on other sites More sharing options...
mvaneijgen Posted January 27 Share Posted January 27 Check out this post on how to animate mask, clip-path's and other such properties. When you still need help, please post a minimal demo and we'll be happy to take a look. 1 Link to comment Share on other sites More sharing options...
Rodrigo Posted January 27 Share Posted January 27 Hi, On top of Mitchel's great suggestion and resources, a further inspection of the site reveals that two images are being used, one as a backgound and another as a mask: .promoListParallax:nth-of-type(odd) .promo { -webkit-mask: url(data:image/png;base64,...; mask: url(data:image/png;base64,...; -webkit-mask-size: 1846px 3200px; mask-size: 1846px 3200px; -webkit-mask-repeat: repeat-x; mask-repeat: repeat-x; -webkit-mask-position: top center; mask-position: top center; } So that's just creating a simple mask on elements with fixed position nothing more. Happy Tweening! Link to comment Share on other sites More sharing options...
sarthak950 Posted January 28 Author Share Posted January 28 @Rodrigo Thanks for yr advice i was able to create the mask with the background but not able to animate it slide { width: 100vw; height: 100vh; position: absolute; top: 0; left: 0; mask-image: url("/img/masks/mask1.png"); mask-position: top center; display: flex; justify-content: center; align-items: center; } the main bg is given sapretly for each slide ( #slide_1 , #slide_2 ) <body id="body"> <section class="slide" id="slide_1"> <h1 class="Center_heading">This is Cool</h1> </section> <section class="slide" id="slide_2"> <h1 id="translate" class="Center_heading">This is Cool</h1> </section> <section class="slide" id="slide_3"> <h1 class="Center_heading">This is Cool</h1> </section> <section class="slide" id="slide_4"> <h1 class="Center_heading">This is Cool</h1> </section> <section class="slide" id="slide_5"> <h1 class="Center_heading">This is Cool</h1> </section> <section class="slide" id="slide_6"> <h1 class="Center_heading">This is Cool</h1> </section> <script type="module" src="./js/animation.js"></script> </body> Link to comment Share on other sites More sharing options...
sarthak950 Posted January 29 Author Share Posted January 29 See the Pen MWxrmyP?editors=1111 by Sarthak_sharma_950 (@Sarthak_sharma_950) on CodePen minimal codepen i have created Thanks @Rodrigo@mvaneijgen 1 Link to comment Share on other sites More sharing options...
Rodrigo Posted January 29 Share Posted January 29 Hi, You have an error in your CSS the property is mask and not mask-image: .element { /* wrong */ mask-image: url(...); /* right */ mask: url(...); } Hopefully this helps. Happy Tweening! Link to comment Share on other sites More sharing options...
sarthak950 Posted January 29 Author Share Posted January 29 nono thats not the main problem sir @Rodrigo i can't animate it or as the clip path is going up i want this ti be animate but cant figure out a way to do so Link to comment Share on other sites More sharing options...
Rodrigo Posted January 29 Share Posted January 29 Sorry but I don't really understand what's the issue you're having, maybe I'm missing something. Please be specific about what is not working and why. Happy Tweening! Link to comment Share on other sites More sharing options...
sarthak950 Posted January 30 Author Share Posted January 30 @Rodrigo I think i was not able to communicate properly See the Pen MWxrmyP by Sarthak_sharma_950 (@Sarthak_sharma_950) on CodePen now i make the mask to work here i have 4 sections and a container 4 section have a position of absolute and the container is positioned relative i have placed mask on all 4 of the sections named (slide) as through the property of the mask that it make some portion of the container transparent i want a curtain like effect such that the mask goes up and hide its respective container and then the other and then the other as per as the website https://www.ubisoft.com/en-gb/game/far-cry/far-cry-6 i hope this is an accurate description Thanks. Link to comment Share on other sites More sharing options...
mvaneijgen Posted January 30 Share Posted January 30 I don't get it, that is what it is doing right? The content is all the same, so it is hard to see hat is going on. Also please read this post I've linked in the first response of this topic! In your CSS you have the following line, which is not correct All numbers should be prefixed with % sign // ❌ bad! clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); // ✅ good clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); See the Pen VwRQLvw?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen Link to comment Share on other sites More sharing options...
Rodrigo Posted January 30 Share Posted January 30 Hi, I think that you're asking us to re-create the effect from the website you linked in your first post in this thread. Unfortunately that's a bit beyond the scope of these free forums since we don't have the time resources to create that for our users. For what I remember in the site you posted every single slide has the mask applied to it, not just one and they're not using clip path but moving the elements. Maybe these demos can help you getting started: See the Pen ZEvGYxE by GreenSock (@GreenSock) on CodePen See the Pen eYPKNPm by GreenSock (@GreenSock) on CodePen Happy Tweening! Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now