Jump to content
Search Community

var not moving (newbie)

Juc1 test
Moderator Tag

Go to solution Solved by Diaco,

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

Hi Juc1  :);

 

It's not working because you're targeting a CSS style for your tweens rather than the div containing your SVG.

 

You currently have this in your CSS:

.st0 {
fill:#EC1751;
position:relative; 
}

and the variable is set to this:

$square = $('.st0');

Just switch it to this: 

$square = $('.square');

Once you do that, everything works just fine.

 

Happy tweening. :)

  • Like 3
Link to comment
Share on other sites

Thanks @ PointC and Diaco - I was hoping to target the svg child element. But anyway another thing - in my updated codepen (same url as above) I want to say move 100px to the right and then 50px down - but the result seems to be a lot more than 100px and a lot more than 50px. Am I doing something wrong?

 

Thanks...

Link to comment
Share on other sites

Hi again Juc1  :),

 

Oh... I didn't realize you wanted to target the SVG child element, I thought you were after the parent div so Diaco's advice is better than mine. :)

 

As far as your new problem goes, you're seeing some scaling on the calculations because the original square is only 7x7 pixels. You have effectively scaled that up to 48x48 pixels by allowing the SVG to scale out to 100% width of it's parent container and the x and y values get scaled with it.  So - you wanted 100px of movement on the x, but you're getting almost 700px of movement. (the square is almost 7 times as big as its initial value)

 

A quick fix to this is change your SVG so that the original size of the square is 48x48:

<div class="square">
    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 48 48" style="enable-background:new 0 0 48 48;" xml:space="preserve">
       <rect x="0" y="0" class="st0" width="48" height="48"/>
    </svg>
</div>

If you change the original square size using the code above, I think you'll see the results you were expecting.

 

You can definitely get some interesting results when you animate outside the bounds of the SVG viewBox with overflow:visible and no set size was given for the SVG. 

 

Hopefully this helps. :)

Link to comment
Share on other sites

Hi again Juc1  :),

 

 

As far as your new problem goes, you're seeing some scaling on the calculations because the original square is only 7x7 pixels...

 

@PointC or anyone - just getting back to this - where in my SVG file (made in AI) does it say my square should be 7 x 7 pixels?

 

Thanks... 

Link to comment
Share on other sites

Hi Juc1 :),

 

This is the size of your SVG viewBox - 7.2 x 7

viewBox="0 0 7.2 7" style="enable-background:new 0 0 7.2 7;" xml:space="preserve">

This is the size of the child rectangle that you are animating: 5.5 x 5.5 positioned at x:0.8 and y:0.8 inside the viewBox

<rect x="0.8" y="0.8" class="st0" width="5.5" height="5.5"/>

:)

Link to comment
Share on other sites

The thing to remember about SVGs and controlling them is that they operate in their own little coordinate world governed only by their viewBox. Unless you tell it otherwise, an SVG is going to expand out to 100% of its parent. 100px inside an SVG may not necessarily appear as 100px on your screen. 

 

So... if you make an SVG that is 100px by 100px with a 10px by 10px child rectangle inside it, but you put the SVG into a parent div that is 1000px by 1000px, your SVG would expand out to 1000px and your child rectangle (as you see it on the screen) would appear to be 100px by 100px. It's relative to the SVG - not the screen.

 

In your case, your 7 by 7 SVG expands out to 48px wide - nearly 7 times its starting size.

 

I made a quick little CodePen for you to show this happening. You'll see the exact same 400x100 SVG in all 3 containing divs, but the first div is twice as big as that and the third is half that size. I have one tween telling the child rectangle to move 350px on the X and then 50px on the Y. The only animation that is actually playing at that size is the middle one because its parent is 400px by 100px - (the exact size as the SVG). But they all look correct because everything has scaled up/down proportionally. 

 

See the Pen QyjMaW by PointC (@PointC) on CodePen

 

It can be a bit confusing to wrap your mind around the viewBox, but once it clicks, you'll see that it's really powerful.

 

I'd recommend reading this article by Sara Soueidan: 

http://sarasoueidan.com/blog/svg-coordinate-systems/

 

I'd also recommend following her on social media. She has written a lot on SVGs and she's pretty darn smart. 

 

I hope this helps a bit. :)

  • Like 3
Link to comment
Share on other sites

@ PointC ok thanks so when you said before "the original square is only 7x7 pixels" 

 

 

Hi Juc1  :),

 

This is the size of your SVG viewBox - 7.2 x 7

viewBox="0 0 7.2 7" style="enable-background:new 0 0 7.2 7;" xml:space="preserve">

This is the size of the child rectangle that you are animating: 5.5 x 5.5 positioned at x:0.8 and y:0.8 inside the viewBox

<rect x="0.8" y="0.8" class="st0" width="5.5" height="5.5"/>

:)

 

 

@ PointC yes I get that but then how did you get from this to saying that "the original square is only 7x7 pixels"?  

 

I could be wrong but I thought that the Viewbox was like a graph / map on which the svg is drawn so if the graph is 7.2 x 7 units then a rectangle of 5.5 x 5.5 units takes up 5.5 / 7 = about 78% of the graph area. I am not sure where the pixels come in to this.

 

Thanks... 

Link to comment
Share on other sites

The thing to remember about SVGs and controlling them is that they operate in their own little coordinate world governed only by their viewBox. Unless you tell it otherwise, an SVG is going to expand out to 100% of its parent. 100px inside an SVG may not necessarily appear as 100px on your screen. 

 

So... if you make an SVG that is 100px by 100px with a 10px by 10px child rectangle inside it, but you put the SVG into a parent div that is 1000px by 1000px, your SVG would expand out to 1000px and your child rectangle (as you see it on the screen) would appear to be 100px by 100px. It's relative to the SVG - not the screen.

 

In your case, your 7 by 7 SVG expands out to 48px wide - nearly 7 times its starting size.

 

 

@PointC that is all very helpful thank you - the one thing I am missing is do you mean that my Viewbox ="0 0 7.2 7" defines the size of my SVG as 7.2 x 7 pixels? If so I guess I misunderstood the meaning / purpose of "Viewbox".

 

Thanks...

Link to comment
Share on other sites

Yep - you are correct - the child rectangle is approximately 78% of the width of the SVG.

 

I think I may have called your actual SVG 'the square' before and your parent div is actually named square so let's clarify:

 

You are right - 7.2 x 7 has nothing to do with pixels. It's units, but unless you specify another unit (em, pt, cm etc...) it's assumed to be equivalent to the same number of pixels.  If you take that SVG and put it into your div (called square) which is 48px, the SVG is going to expand to 100% of its parent so the SVG is now 6.67 times bigger which means the child rectangle is now approximately 36px. The scale and coordinates have all grown by 6.67 times. So... you ask it to move 100px (units) and you're going to get 6.67 times that movement.

 

Try this little experiment. Go back to your CodePen and change the size of your containing div to 7.2px wide instead of 48px and watch what happens. You'll see the correct 100px movement on x followed by 50px on y. (but it will stay at original size)  After that - just for fun - remove the containing div and watch how huge that rectangle gets.  

 

:)

  • Like 1
Link to comment
Share on other sites

...7.2 x 7 has nothing to do with pixels. It's units, but unless you specify another unit (em, pt, cm etc...) it's assumed to be equivalent to the same number of pixels.  If you take that SVG and put it into your div (called square) which is 48px, the SVG is going to expand to 100% of its parent so the SVG is now 6.67 times bigger...

@PointC ok thanks this was the bit I was not getting "It's units, but unless you specify another unit (em, pt, cm etc...) it's assumed to be equivalent to the same number of pixels" - I read this about Viewport (which I think is not declared in a responsive SVG) but I did not know the same applied to Viewbox.

 

I have kept my original codepen to remind myself how not to do it so...

 

Try this little experiment. Go back to your CodePen and change the size of your containing div to 7.2px wide instead of 48px and watch what happens. You'll see the correct 100px movement on x followed by 50px on y. (but it will stay at original size)

 

See the Pen GoZzRB by Juc1 (@Juc1) on CodePen

 

After that - just for fun - remove the containing div and watch how huge that rectangle gets.

 

 

See the Pen zrqyVB by Juc1 (@Juc1) on CodePen

 

Anyway it is much clearer now - thanks for your help and patience  :)

  • Like 1
Link to comment
Share on other sites

You're very welcome - happy to help. :)

 

It can be a bit confusing when you first start using SVGs. When you scale an SVG and let the child element 'escape' the viewBox with overflow:visible it can get especially confusing - as you found out.

 

Also - don't forget - you can also target the SVG itself for animation.

 

Happy tweening. :)

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.
×
×
  • Create New...