carousel with diagonal transition

[Salmen]

Hi, is it possibile to create a carousel with diagonal transition form left bottom to right top ? how should i create animation per every single slide?

Thanks

[PointC]

Hi @Salmen 

 

Welcome to the forum.

 

I don't know why you couldn't have a carousel move diagonally. You'd just animate the +x and -y of each slide. There would be a variety of ways to set it up. Maybe a parent div with overflow:hidden or you could use a mask/clip-path. However you set it up, GSAP will animate the values perfectly for you.

 

For more detailed answers, you can create a demo. More info about that:

Happy tweening.

 

[Carl]

Hi Salmen,

 

Welcome.

 

Like PointC said, a demo would really help as their are many ways to interpret "a diagonal transition". Are the images moving diagonally? Is it a mask-reveal that is on an angle?

 

Also without a demo of some of the HTML/CSS structure, its hard to know what type of answer you are looking for. Do you want us just to explain some basic concepts or are you expecting us to build it for you from the ground up?

 

I'm sure we can help you with some of this, but we do have to keep support very focused on the GreenSock API, so whatever you can do to help us provide a clear and focused answer will really help.

 

My suggestion would be to first provide a basic demo of 2 images so that we can better understand what you mean by the diagonal transition.

 

Thanks

 

 

[Salmen]

3 hours ago, PointC said:

Hi @Salmen 

 

Welcome to the forum.

 

I don't know why you couldn't have a carousel move diagonally. You'd just animate the +x and -y of each slide. There would be a variety of ways to set it up. Maybe a parent div with overflow:hidden or you could use a mask/clip-path. However you set it up, GSAP will animate the values perfectly for you.

 

For more detailed answers, you can create a demo. More info about that:

Happy tweening.

 

 

3 hours ago, Carl said:

Hi Salmen,

 

Welcome.

 

Like PointC said, a demo would really help as their are many ways to interpret "a diagonal transition". Are the images moving diagonally? Is it a mask-reveal that is on an angle?

 

Also without a demo of some of the HTML/CSS structure, its hard to know what type of answer you are looking for. Do you want us just to explain some basic concepts or are you expecting us to build it for you from the ground up?

 

I'm sure we can help you with some of this, but we do have to keep support very focused on the GreenSock API, so whatever you can do to help us provide a clear and focused answer will really help.

 

My suggestion would be to first provide a basic demo of 2 images so that we can better understand what you mean by the diagonal transition.

 

Thanks

 

 

Hi everyone :),

 

i'm just looking to understand the concept on how can i create this carousel.

The goal is to create a diagonal transition between sliders. Example: https://codepen.io/bananascript/pen/ofiFC.

I tried the solution in that pen but it's causing me a performance issue using only css, so i decided to use gsap to get better performance.

 

Thanks.

[PointC]

Oh that is different than I was picturing. You said carousel so my mind went elsewhere. 

 

We had a similar question a few months ago. @Sahil has a nice solution in this thread.

 

Happy tweening.

 

[mikel]

Hi @Salmen,

 

Welcome to GreenSock - and your coding becomes easy.

 

Perhaps like this - here in two stages:

 

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

 

Happy tweening ...

Mikel

[Salmen]

Thanks all for the response. Great solutions.

The problem here is the animation must be between two images without extra solid color layer.

I found the solution here https://codyhouse.co/demo/animated-svg-image-slider/index.html.

The solution implement image tag inside svg and using snapsvg library. In my case I must use img tag with srcset. 

I would like to use tweenlite for all my animations without adding extra library :).

[mikel]

Hi @Salmen,

 

maybe so - sorry, have overwritten the pen:

 

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

 

Take a coffee - have an idea ...

Mikel

[PointC]

Sounds similar to what @OSUblake did in this thread.

That should get you started. Happy tweening.

[mikel]

Hi @PointC,

 

In fact it was @OSUblake who wrote this excellent code - see my reference in JS.

 

Kind regards

Mikel

[PointC]

Hi @mikel 

 

Sorry, my response wasn't about your demo. It was for @Salmen as he mentioned changing sources for the images which is what Blake is doing in that radial demo.

 

[OSUblake]

To animate a clip path in IE/Edge, you will need to use SVG. And I don't know why you would need to use snapsvg. It would be very easy to animate a diagonal clip path with GSAP. Just animate the points of polygon using the AttrPlugin. 

https://developer.mozilla.org/en-US/docs/Web/SVG/Element/polygon

https://greensock.com/docs/Plugins/AttrPlugin

 

And look at the thread @PointC linked to. I'm using the src from regular HTML <img> tags on SVG <image> tags. For srcset, you would use the currentSrc property, with a fallback to the src property if that doesn't exists.

 

var xlink = "http://www.w3.org/1999/xlink";

svgImage.setAttributeNS(xlink, "href", htmlImage.currentSrc || htmlImage.src);

 

[Salmen]

1 hour ago, OSUblake said:

To animate a clip path in IE/Edge, you will need to use SVG. And I don't know why you would need to use snapsvg. It would be very easy to animate a diagonal clip path with GSAP. Just animate the points of polygon using the AttrPlugin. 

https://developer.mozilla.org/en-US/docs/Web/SVG/Element/polygon

https://greensock.com/docs/Plugins/AttrPlugin

 

And look at the thread @PointC linked to. I'm using the src from regular HTML <img> tags on SVG <image> tags. For srcset, you would use the currentSrc property, with a fallback to the src property if that doesn't exists.

 

var xlink = "http://www.w3.org/1999/xlink";

svgImage.setAttributeNS(xlink, "href", htmlImage.currentSrc || htmlImage.src);

 

@OSUblake @PointC thank you so much guys. This is what i was looking for. I will post my final solution integrating it with the slider.

[Salmen]

Hi all,

 

I would like to share with you my test, might be helpful for someone else :).

 

Thanks.

 

See the Pen QxYBwR by salmen (@salmen) on CodePen