#Hey guys, I've been asked to create a slider that transitions like this. Any ideas?

3 messages · Page 1 of 1 (latest)

nimble snow
#

If anyone could point me in the right direction to learn, or have any suggestions that would be amazing.

slide.jpg slider.jpg slider2.jpg slider3.jpg slider4.jpg slider5.jpg
timid shale
#

You'd have to layer the images with the new image below the old image probably. You might be able to use clipping to mask the old image so that it shows the new image through in the correct places... Then you animate that and add a graphic for the orange squares.

Overall this is gonna be an advanced project that's gonna take a lot of learning and experimentation... And yes, just this transition is a project unto itself...

#

I'd probably tackle the research and experimentation this way

  1. Find a way to get square cutouts into an image so that I could see whatever was below it. Start by researching clipping and masks in CSS, probably using SVGs as the clipping mask.
  2. Get two images to layer one below the other and apply a clipping mask to reveal the lower image through the upper image.
  3. Figure out how to animate that clipping mask.
  4. Add the orange square graphics (this'll be the easiest part).