Animating an SVG masp

[popland]

Hello all, i am trying to animate an SVG clipPath (to reveal an underlying image)

in the pen you can see how i placed the the SVG over the image, but it looks the "#yes" id (the clipPath) can't be easily animated (i did not attached a gsap animation yet, but manuallly updating the css does not get the wished result); i would like to scale the SVG from the center of the image, from 0 to big enought to show the whole image

i read all the posts about the SVG, but no luck yet

See the Pen GRyvBEa by lenna-the-vuer (@lenna-the-vuer) on CodePen

[PointC]

I find it much easier to just put the image into the svg so everything scales together. I'd set it up like this:

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

 

Just FYI - strokes will not work in a clip-path. You'll need to use a mask for strokes and gradients. More info in my tutorial here:

https://www.motiontricks.com/svg-masks-and-clippaths/

 

Happy tweening.

 

[popland]

Thank you!

my goal is a bit more complex, on the first page load i need the page to be revealed by the growing logo, the page page is actually a slider...

at the moment the page is revelaed by a simple clip-path in two steps, (you can see an example here: https://paca.popland.it) with a basic timeline like this (when you get back to home the effect is not repeated):

const tl = gsap.timeline();

    tl.to('.homeSlider', {

      'clip-path': 'polygon(0% 0%, 100% 0%, 100% 0%, 0% 100%)',

      duration: 0.8,

      ease: 'power4.easeInOut',

    }).to(

      '.homeSlider',

      {

        'clip-path': 'polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)',

        duration: 0.6,

        ease: 'power4.easeInOut',

      },

      '-=.3'

    );

 

its not bad, but since i have the logo in SVG format a zooming logo reveal would be nice

[popland]

With a bit of trial and error and some workaround (setting the position in css and then again in gsap) i got almost done 

[popland]

Just for update

i am able to position and scale the svg, but it looks like it is ignoring the transform-origin

 

[GreenSock]

A few problems: 

• There's no such thing as transform-origin:bottom-left I think you meant "left bottom" (no dash, in the proper order)
• More importantly: always set transform-related values through GSAP because it fixes a lot of cross-browser issues. Don't just put it in your CSS and expect it to work, especially with SVG. 
• Don't use "transform" - it's much better and faster to just use the component aliases like x, y, and scale: 

See the Pen YzYrQYR?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Happy tweening!

[popland]

Thank you @GreenSock in fact bottom-left stayed there as an experiment (i was looking for center)

using your suggestion it works almost perfectly (the problem now is the SVG that no matter how big it is, it keeps a "white" part in the middle :D)

Anyway what was interesting is the concept, i will deal with SVG shape later

or (but i dont think its possible) i will fade away the clipPath once big enough

 

At the moment i'm quiete satisfied with the animation i came up, i will try to implement on the live site too