Jump to content

Image slider with diagonal wipe - GSAP and SVG

Recommended Posts

Hi There!!


I've been working with GSAP for a while and it is awesome in every way possible for web animations. As a newbie, I stumble when I go about implementing some complicated animations (atleast complicated for me). It would be of great help if any of the superheros (anyone who is of great help is a superhero, LOL) could help me figure out a way to implement a wipe image slider animation like the one in the below link but that looks like the image is wiped from a black board (diagonal wipe of the attached codepen).


slider animation: https://codyhouse.co/demo/animated-svg-image-slider/index.html


sliceimage codepen: (here the slices fade away, is there a way to make each slice wipe away one by one revealing the next image? like SVG masking or clip path)

See the Pen qadqxE by sgorneau (@sgorneau) on CodePen


Thank you! hope new year is going good for you.


Share this post

Link to post
Share on other sites

Hi @namisuki. That demo uses SVG and a <clipPath> to accomplish that effect. I don't have time at the moment to mock the whole thing up for you, but it basically boils down to: 

  • Instead of an <img>, use an <image> inside an <svg>. Well, one <image> for each image you've got, of course. All stacked. 
  • Define a <clipPath> that'll act as a mask (one for each image) and you can use a <path> or <polygon> in that which will have an angled edge to it. 
  • Animate the <path> "d" attribute with GSAP, or you could try animating the x position of it but I'm not positive all browsers will render that properly. And when I say animate the "d" attribute (or the "points" attribute of a <polyline>), I mean that you could have the beginning and the ending shapes and just copy that data into your tween. So if it starts at points="0,0 100,0 100,50 20,50", then you could tween to TweenMax.to(yourPolyline, 1, {attr:{points:"100,0 200,0, 200,50 120,50"}}); for example. 

I hope that helps! 

  • Like 4
  • Thanks 1

Share this post

Link to post
Share on other sites

Hi @GreenSock,


Thank you so much for your reply. I implemented the desired effect with your instructions. it came out pretty well in the below code pen. however when trying the effect diagonally, I kind of have hard time figuring out which 'd' value to animate( when i try to animate the 'M' value nothing happens). please refer the second code pen to see where i'm standing right now.


See the Pen zeKBpm by namisukichin (@namisukichin) on CodePen


is there a way to set the rotation the clippath of the above codepen so that the effect looks diagonal or animating the 'd' values are the only option?


diagonal try:


See the Pen aXmBqL by namisukichin (@namisukichin) on CodePen


Thank you.

Share this post

Link to post
Share on other sites

Just looked at my example pen on my android phone and noticed the second example is not rotated correctly. I shall investigate. 


Nag me in a couple of days if I don't come up with an update until then. 




Share this post

Link to post
Share on other sites

Ok, it's fixed now.


It seem that you cannot (or should not) apply transformations to non-rendering elements (I initially had the other cubes in a <symbol>).

  • Like 3

Share this post

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.