Jump to content
Search Community

TimeLine + Draggable + svg.js> draggable trigger bounds ERROR

21cm 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

Thank you for your help in advance.
 

I am creating a svg timeline slider.
 

The meter moves as the timeline progresses.
 

Move point to the left after a certain number of seconds, and return x to 0

The following error will occur once every few times to dozens of times.

(I confirmed it with Firefox Chrome IE, bounds of draggable seems to be failing.)
 

//////////// console //////////////////
svg.js: 2716 Error: <rect> attribute width: A negative value is not valid. ("-5.684341886080802e - 14")
attr @ svg.js: 2716
width @ svg.js: 1069
myslider @ pen.js: 47
en @ Draggable.min.js: 14
db @ Draggable.min.js: 14
P @ Draggable.min.js: 14
h.dispatchEvent @ TweenMax.min.js: 16
s @ TweenMax.min.js: 16
///////////////////////////////////////////////////////////////
 

Frequent occurrence, no occurrence at all, I do not know the timing and reason of occurrence at all.
(Because there are times when errors do not occur, it is necessary to update it with f5 key several times and try it.)
 

However, an error will definitely occur.
 

It seems that an error occurs when x of point bound in bar becomes less than 0.
(In many cases, x is -5.68434188806080802e - 14.)

 

Also, this error will not occur unless you move point in timeline: update.

 

Here is an example.

draggable_error_chrome.gif

See the Pen ?editors=1111 by shikloft (@shikloft) on CodePen

Link to comment
Share on other sites

Thank you for your reply.
 

> I can not replicate your error.

It seems that it can not be confirmed without opening the page and directly looking at the console instead of embedding.
 

I uploaded a gif image examined with chrome.(pasted it above codepen.)

Please confirm, thank you.
 

> Maybe if you set the edgeResistance to 1 will stop it from happening?

Thank you very much. I think I will try it.

Link to comment
Share on other sites

Right.

 

The gif you uploaded made a world of difference. I have my CodePen in a different layout than yours (with the code on the left, rather than on top) and copying your layout enabled me to replicate the error you are reporting.

 

I have never used SVG.js (although I do a fair bit of SVG myself) so, I haven't got much insight, you will have to help me to help you.

 

The issue stems from the fact that you are modifying the width of the 'line' based on the 'x' of your 'point_dr'. At some point, for some reason, one manages to drive that number into the negative, which causes SVG.js to throw an error. I don't feel you have the best setup by changing the width but it appears to me that you can stop the SVG.js error by simply doing a Math.abs() before you assign  it to the 'x'.

 

var x = Math.abs(point_dr.x);

 

Since you're using draggable, you will have access to a lot of information if you look into the 'this' object inside your mySlider() - In your case 'this' will be the actual Draggable object, it probably will be safer to track how much the mouse has moved (deltaX), subtract that from the width of your line making sure that if you get a number that's less than zero to make the end value equals to zero.

 

Something along the lines of:

 

var x = line.width() - this.deltaX;
if(x <= 0) { x = 0 }

 

Hope that helps!

 

ps: Shooooo @Carl! I'm trying to earn some brownie points here! Don't steal my thunder...

  • Like 5
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...