Jump to content
GreenSock

leandrolima

DrawSVG - How to animate external file .svg?

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hello guys,

 

Is it possible to animate an external file .svg (not the code) with the DrawSVG Plugin?

 

My real problem is that I need to place this .svg file as background responsive and I can't find a way to do it if it is a code inside the html file. If I put as code the animation works but I can't control the position like I do with the image.

 

 

HTML:  div

<div class="bgcover" id="outlines_intro"></div>

CSS: Code I use to insert the file:

 

div.bgcover
{ 

background: url(../img/cover.svg) no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
      
left: 0;
width: 100%;
height:100%;
position: fixed;

}

JS: That's the javascript line that doesn't animate my svg background:

TweenMax.from ("#outlines_intro", 5, {drawSVG:"100% 100%", ease:Expo.EaseOut})

Thanks,

 

Leandro

Link to comment
Share on other sites

Hi and welcome to the GreenSock forums,

 

Great question.

According to my understanding (from this article) you can not target the child nodes of an svg if it is used in an <img> tag or as background-image :(

However, I would think the svg would serve plenty of responsive purposes if used inline, this is a great resource for responsive svgs and it appears to have some tips for inline <svg>

  • Like 1
Link to comment
Share on other sites

Hello Carl,

 

Thank you for answering. I already give up of the option to animate the file .svg with DrawSVG.

 

On my project I'm using a .jpg background fullscreen responsive that works perfectly.

Over it need to be placed the svg object exactly in the same way because both images complete each other.

 

This is the code for the background image that works great:

div.bgcover
{ 
background: url(../img/cover.jpg) no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
      
width: 100%;
height:100%;
position: fixed;
}

Let me know if you know how to 'translate' it for the svg embed in the html.

 

Thanks again.

 

Leandro

Link to comment
Share on other sites

Hi Leandro,

to get the perfect position of two layers (background image and svg) on top of each other will be challenging if you use the background-size: cover.

 

I would recommend using FocusPoint -  to resize an image and then resize your SVG to the same dimensions.

 

This will make sure that:

- the focus point of the image is always visible at any screen size

- the SVG is perfectly aligned on top of the image

- you can animate the inline SVG and it's content

 

Hope that helps.

 

Cheers

Petr

@ihatetomatoes

Link to comment
Share on other sites

  • 1 month later...

So if all the SVG images used with DrawSVG are inline, does that mean there's no way to cache the images used?

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.
×