Share Posted July 24, 2017 (edited) Is it possible to stack an img on top of an animating drawSVG? Just looking for a simple yes or no at the moment. I've got something working so far… See the Pen dzyKGz by benjino (@benjino) on CodePen Edited July 24, 2017 by benjino added codepen Link to comment Share on other sites More sharing options...
Share Posted July 24, 2017 Hi Benjina, If you mean something like this - YES it is: See the Pen NNwLNm by osublake (@osublake) on CodePen Best regards Mikel 4 Link to comment Share on other sites More sharing options...
Author Share Posted July 24, 2017 Sort of. I am not thinking that the photo (img) travels the path of the animation. I am thinking a photo on top of a animating svg, where the svg animates behind the photo with the svg being larger than the photo—the photo remains static on top of the animating svg. Link to comment Share on other sites More sharing options...
Share Posted July 24, 2017 Hi Benjino, But this is certainly possible. With position absolute, both can be superimposed. Whre is the problem?? The best thing would be to provide a reduced CodePen: with an image and the svg plus the scheduled animation. And than happy tweening ... Mikel 1 Link to comment Share on other sites More sharing options...
Share Posted July 24, 2017 Does the top photo have some transparency so the SVG animation behind it is visible? In any case, you should be able to absolutely position a photo over the top of the SVG. You could also put the image inside the SVG so it scales nicely with the animation. Here's a really basic example of an image inside the SVG. See the Pen qrROyg by PointC (@PointC) on CodePen Happy tweening. 5 Link to comment Share on other sites More sharing options...
Share Posted July 24, 2017 seems the other guys were already on the case, but as Mikel said, with position absolute you can put an image over and SVG. Really nothing preventing how you set up your html and stack elements when using DrawSVG See the Pen ZJEoNz by GreenSock (@GreenSock) on CodePen Nice demo, Craig! 4 Link to comment Share on other sites More sharing options...
Author Share Posted July 24, 2017 I added a pen. Link to comment Share on other sites More sharing options...
Share Posted July 24, 2017 Thanks for the demo. Is that working as expected so this is now solved? Happy tweening. Link to comment Share on other sites More sharing options...
Author Share Posted July 24, 2017 Yes you can close this ticket, I can now tool around with it using timeline where if i have any issues there I'll take up in a new post. 1 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