Jump to content
Search Community

SVG TweenLite.to setting slider initial position Viewbox problems

zagdxb test
Moderator Tag

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,

 

I have an interesting(for me) issue I couldn't figure out. The code performs as I expect it to, setting the slider initial position depending on value of  "current_value" variable, but only if I don't set the SVG Viewbox with Snap, on document ready.

 

On the Code pen, you can remove that part at the beginning of $(document).ready and the slider sets the initial position correct.

 

If the ViewBox is set, then the slider sets itself on some weird position I couldn't figure out. Mostly it goes out of bounds on the right, depending on the screen size. Try to view same code pen full screen. -> this

 I'm sorry if the codepen is messy, I tried clearing it out as much as I could.

 

It is imperative for me to have the viewbox set, for resizing and centering the whole SVG. I feel like I need to tell Greensock that the view box has changed with Snap or something like that.

 

Help? What did I miss?

 

Thanks

 

One below is working as expected, only this was removed on load

  ////remove below
  var svg = Snap('#svg');
    svg.attr({
        viewBox: "0 0 1280 720",
        width: "100%",
        height: "100%"
    });
  //////////remove to here
  

See the Pen gEgYwN by zagdxb (@zagdxb) on CodePen

 

 

This one setting the initial position of the slider wrong:

 

See the Pen xBRoRo by zagdxb (@zagdxb) on CodePen

 

Link to comment
Share on other sites

I'm not really sure what you're going for here and I'm not at all familiar with snap, but here's a basic demo with a Draggable and viewBox zoom. You can see everything works as expected.

 

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

I don't have time to dig into all your code, but I see the SVG is set to position:fixed and width/height of 100%. Combining that with a viewBox setting may be messing up some coordinates. Maybe my simple demo will give you some new ideas. Happy tweening.

  • Like 2
Link to comment
Share on other sites

Nice example, just what I need to do, but only with Tweenlite. My slider and draggable are working fine while resized to any size. Only issue is with setting the initial position when the page is loaded and the viewbox is resized.

 

Check out the same codepen full screen and in editor

See the Pen xBRoRo by zagdxb (@zagdxb) on CodePen

See the Pen xBRoRo by zagdxb (@zagdxb) on CodePen

The x of slider should be all the way on the right limit of the background rectangle. current_value is 35, and my min/max are 15-35, and it is not.

 

I'll give a good look at the example, it seems the answer is in there somewhere.

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