Carousel with a curl effect

[albuff]

Hello,
this is my first time on GreenSock. I'd like to create a carousel with a curl effect, like this: https://www.axalta.com/corporate/en_US.html
Can anyone suggest a resource to start with? Thanks

[PointC]

Looks like they have a <div> called circle with two SVGs in it. Those appear to be acting as masks for the slides. I didn't dive too far into the code, but I'd guess they are alternating the masks to show and hide the active slide(s).

 

I'd start by doing some experiments with SVG masks or clip-paths over the top of images/divs and go from there. If you have any GSAP related questions with your project, we're happy to assist.

 

Happy tweening.

 

[albuff]

Thanks Craig for your interest!

 

The div called 'circle' seems only a visual aid.

Looking at the code, there is a <div> called 'homepage-carousel--slide' which contains the slides.

Each slide has a height of 3 times the height of the window and has a large border at the bottom right.

When the user clicks on the next slide, this div 'homepage-carousel--slide-mask' containing the background image is translated upwards until it disappears.

I would like to understand if Greensock can help me manage the animation and if I can also control it with the mousewheel, and which plugins I should need.

[PointC]

GSAP is an animation engine. It doesn't do any of the rendering — that's all handled by the browser. There isn't any out-of-the-box solution to making that effect for you. You'll have to decide how to move, mask or clip the slides. Once you have something in place, GSAP can certainly handle the animation for you. 

 

You can control anything with the mousewheel. More info:

https://developer.mozilla.org/en-US/docs/Web/Events/wheel

[Visual-Q]

Yep there's nothing stopping you from using the technique that page uses, it's a fairly simple solution that makes it look like the shape of a mask is changing when it's really just moving a container up. If you study the way the elements and css are constructed  and duplicate it the elements can be animated by gsap.

 

It looks like the mask shape is achieved by a large border radius on the outer container. The container moves up while the inner div's background image is moved counter to this to maintain it's position on the screen.

 

A timeline with two tweens targetting an array of the slide elements and fired by deltaY on mousewheel listener may be all you need. 

 

I actually like this solution, it makes it look like something complicated is happening but it's just clever css.

 

[mikel]

Hi @albuff,

 

Welcome to the GreenSockForum.

 

Here is a rough concept: clip-path with a larger circle, x-/y-values animated.

Instead of a circle, the animation could also be customized with a special polygon.

 

See the Pen JzQrrE by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

 

 

[PointC]

Nice work @mikel. ?