Jump to content
GreenSock

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

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

Share this post


Link to post
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
  • Thanks 1

Share this post


Link to post
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: 

Regards

  • Like 3

Share this post


Link to post
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
  • Thanks 1

Share this post


Link to post
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
  • Thanks 1

Share this post


Link to post
Share on other sites

Thank you everyone for your generous assistance with this question. I’ve had to move on to some other more pressing issues but I will get back to this issue very soon. 

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.

Guest
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.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×