Jump to content
GreenSock

benjino

Image Stacked on top of drawSVG Possible?

Recommended Posts

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 by benjino
added codepen
Link to comment
Share on other sites

Hi Benjina,

 

If you mean something like this - YES it is:

 

See the Pen NNwLNm by osublake (@osublake) on CodePen

 

Best regards

Mikel

  • Like 4
Link to comment
Share on other sites

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

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

 

 

  • Like 1
Link to comment
Share on other sites

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.

:)

  • Like 5
Link to comment
Share on other sites

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!

 

 

  • Like 4
Link to comment
Share on other sites

I added a pen.

Link to comment
Share on other sites

Thanks for the demo. Is that working as expected so this is now solved?

 

Happy tweening.

:)

Link to comment
Share on other sites

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.

  • Like 1
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.
×