Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Is this possible? SVG masking a "ken burns" image slider?

Recommended Posts

I'm a complete newbie to GreenSock. I'm encouraged by what I've seen here (really, really amazing stuff). 


I'm trying to render in code and images/vectors a version of something I've already done in video. I've deployed this little site and was asked to animate some images behind their logo (using the logo as a mask). The site is located at https://momentovillasdelmar.com. The image of the logo is done as a video -- with the commiserate file size and limitations of video. I'm seeking a solution that uses an SVG to mask the 4 or 5 images that are sliding around and cross-fading behind the mask.


Is this something that can be done (I know it has to be)? I would very much appreciate any insight you all might be able to provide.


-- Doug

Link to comment
Share on other sites

Hey Doug and welcome to the forums,


This is very doable!


The first thing you need is the SVG mask (or clip path - I'd recommend a clip path for something like this). You should be able to export a mask like the one you're wanting from a vector editing software like Illustrator (or Inkscape). You could even generate it from a font file (if you have the font on your system, type the "N" using that font, then convert it to a path). 


Once you have the mask include the SVG with mask in your project and apply the mask to your images (I'd probably position the images with position: absolute).


Then you just have to loop the image movement and opacity changes. There are a lot of ways to do this, but GSAP's timelines (like TweenMax.timeline) should make that part easy. 


Let us know if you have any other questions! We're happy to help, especially if you provide a CodePen of what you're stuck on.


Happy tweening.

  • Like 3
Link to comment
Share on other sites

Just about anything can be done if you put enough time and effort forth...

It's called masking or clip-path and you can see a nice little video about it here: 


  • Like 2
Link to comment
Share on other sites

Yep, very doable. In addition to Zach's excellent advice I'd offer the possibility of using the SVG clip-path too. Masks differ a bit and are great when you need strokes or gradients to be part of the mask. Here's a quick clip-path option. Maybe it'll give you some ideas.


See the Pen xxKwZqQ by PointC (@PointC) on CodePen


Happy tweening and welcome aboard.


  • Like 3
Link to comment
Share on other sites

Heck, you could even keep the text in the SVG itself and not convert it to a path if you wanted to and had the font loaded (especially if you're going to use the same font somewhere else). 

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.