Slidshow with masking effect on last slide

[Kamran]

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

[Rodrigo]

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!

[Kamran]

@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

 

[Cassie]

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

[Cassie]

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.

[Kamran]

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?

[Cassie]

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.

[Kamran]

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!