EricLaut Posted March 6, 2020 Share Posted March 6, 2020 I am using an inline SVG as a background image which is converted for css using this: See the Pen ygvgay by elliz (@elliz) on CodePen The SVG still has its id in the css background image, so I'm unsure as to why I'm unable to animate it using gsap. See the Pen LYVOWjB by efl32 (@efl32) on CodePen Link to comment Share on other sites More sharing options...
ZachSaucier Posted March 6, 2020 Share Posted March 6, 2020 Hey Eric and welcome to the GreenSock forums! Browsers aren't really built to animate background images, even SVG background images. Animating them via JS is technically possible. You could edit the background image URL and update it, but that's very slow. Why not animate the element that has the SVG background instead? If needed, create a dummy container DIV and animation that. If you need to animate specific parts of the SVG then you should embed it. That will give you full access and the best performance. Perhaps sharing your actual use case we can provide more specific information. 2 Link to comment Share on other sites More sharing options...
EricLaut Posted March 6, 2020 Author Share Posted March 6, 2020 6 minutes ago, ZachSaucier said: Hey Eric and welcome to the GreenSock forums! Browsers aren't really built to animate background images, even SVG background images. Animating them via JS is technically possible. You could edit the background image URL and update it, but that's very slow. Why not animate the element that has the SVG background instead? If needed, create a dummy container DIV and animation that. If you need to animate specific parts of the SVG then you should embed it. That will give you full access and the best performance. Perhaps sharing your actual use case we can provide more specific information. Yes, I need to animate specific parts of the svg. Here is the the actual use case See the Pen gOpXmqb by efl32 (@efl32) on CodePen The svg needs to align with a separate background image which is why im trying to use the svg as a background image also Link to comment Share on other sites More sharing options...
ZachSaucier Posted March 6, 2020 Share Posted March 6, 2020 4 minutes ago, EricLaut said: The svg needs to align with a separate background image which is why im trying to use the svg as a background image also Why not apply the background-image to the SVG element itself? Or better yet, just include the image in the SVG via the <image> tag? 2 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