popland Posted March 31, 2022 Share Posted March 31, 2022 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 Link to comment Share on other sites More sharing options...
PointC Posted March 31, 2022 Share Posted March 31, 2022 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. 4 Link to comment Share on other sites More sharing options...
popland Posted March 31, 2022 Author Share Posted March 31, 2022 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 Link to comment Share on other sites More sharing options...
popland Posted March 31, 2022 Author Share Posted March 31, 2022 With a bit of trial and error and some workaround (setting the position in css and then again in gsap) i got almost done Link to comment Share on other sites More sharing options...
popland Posted March 31, 2022 Author Share Posted March 31, 2022 Just for update i am able to position and scale the svg, but it looks like it is ignoring the transform-origin Link to comment Share on other sites More sharing options...
GreenSock Posted March 31, 2022 Share Posted March 31, 2022 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! 1 Link to comment Share on other sites More sharing options...
popland Posted March 31, 2022 Author Share Posted March 31, 2022 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 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now