Kamran Posted November 6, 2022 Share Posted November 6, 2022 Hello Guys, Hope you are doing great, I'm developed slideshow and its working fine when user scroll down and up but I need this masking effect (https://www.accenture.com/sa-en) when user reach on the last slide after all animations. After completion of the masking animation user should able to scroll the rest of the website but I'm not enable to find any solution. Here is the external link that I have developed so far (https://glistening-longma-b45cd9.netlify.app) Can you please help me with that. Thank you See the Pen OJERxQG by camraan (@camraan) on CodePen Link to comment Share on other sites More sharing options...
Rodrigo Posted November 7, 2022 Share Posted November 7, 2022 Hi, That can be created with SVG or Clip Path. I don't excel in any of those areas unfortunately, but there are a few around here that have left some gold nuggets of wisdom for the rest. Please check this threads as they should guide you: To learn more about SVG masks: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/mask See the Pen GRodvp by yoksel (@yoksel) on CodePen Great tool for visualizing clip paths: https://bennettfeely.com/clippy/ Hopefully these links help you finish your project. Happy Tweening! Link to comment Share on other sites More sharing options...
Kamran Posted November 7, 2022 Author Share Posted November 7, 2022 @Rodrigo Thank you for your reply, I have managed to add masking effect. Its working now but Slideshow stop working when I go back to previous slides after masking animation. Can you please guide me what I'm doing wrong? See the Pen OJERxQG by camraan (@camraan) on CodePen Link to comment Share on other sites More sharing options...
Cassie Posted November 7, 2022 Share Posted November 7, 2022 Hey there! It looks like you might be trying to mix up sections that are triggered by events and other sections that have normal scrolling. I would advise against this from a UX perspective, it's pretty confusing for users. If you do want to continue with this route, I'd recommend taking a look at Observer. It'll be easier than manually adding all the events like you are currently. Take a look at this pen. It's similarly handling one section with events and then allowing scrolling after that section See the Pen ExopjNW by GreenSock (@GreenSock) on CodePen 1 Link to comment Share on other sites More sharing options...
Cassie Posted November 7, 2022 Share Posted November 7, 2022 I'm a bit confused by your example though I'm afraid. I'm getting different results each time I scroll and I'm not really sure what the end goal is. If I were you I would simplify the pen down and just focus on getting the scrolling behaviour right. Then add complexity with masking and animation when the groundwork is working nicely. Link to comment Share on other sites More sharing options...
Kamran Posted November 7, 2022 Author Share Posted November 7, 2022 Thank you Cassie, For detailed answer. This example is perfect. May I know How can I add fade effect when slides change instead of sliding effect? Link to comment Share on other sites More sharing options...
Cassie Posted November 7, 2022 Share Posted November 7, 2022 Sure thing - So this is where the animation is happening... gsap.to(target, { yPercent: isScrollingDown ? -100 : 0, duration: 0.75, onComplete: () => (animating = false) }); If you want to fade you'll have to position the elements on top of each other and use opacity instead of yPercent. 1 Link to comment Share on other sites More sharing options...
Kamran Posted November 8, 2022 Author Share Posted November 8, 2022 Thank you Cassie, Its working great. I have few questions, It would be great if you can guide me on this. I need to add animations on elements inside the active section (For example: Text, Image and Button etc). The animation would start when user will enter in the section and before leaving the animations should reverse. How can I achieve this? In the same slideshow, I need another pin within last section. I need add another animation for masking. Is that possible? Thank you again for your help! 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