Salmen
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by 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.
-
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 :).
-
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.
-
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
carousel with diagonal transition
in GSAP
Posted
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