[slider not working correctly on iPad.]

Yea canvas can become very slow on an iPad, especially with the high definition screens - KineticJS will modify the pixel ratio to keep the image crisp, but it can create a huge performance drain.

 

I have a feeling you might be able to mitigate the unresponsiveness by throttling the slider update rate for mobile devices:

$("#slider").slider({
  range: false,
  min: 0,
  max: 100,
  step:.1,
  slide: function ( event, ui ) {
    tl.pause();
    //adjust the timeline's progress() based on slider value
    updateProgress(ui.value/100); // throttled
  }
});	

// one update per 150ms (arbitrarily chosen, adjust this to suit your needs)
var updateProgress = $.throttle(150, function(t) {
  tl.progress(t);
});

[ include the throttle/debounce plugin from http://benalman.com/projects/jquery-throttle-debounce-plugin/ ]

 

Thank you Jamie, that actually explains alot.  I also tried the plugin, but it's still doing the same exact thing, so I think it's canvas that's doing it.

[slider not working correctly on iPad.]

Ok, I'll do a Pen, but it's going to be huge, and it's not going to look right due to images, xml, hyperlinks, and other misc things like that.  That's the main reason I was against doing one.

 

See the Pen hoCBz by anon (@anon) on CodePen

[slider not working correctly on iPad.]

Hi, I can tell nothing without seeing the actual slider code. If you create a codepen demo I may be in greater help. For now, what I would suggest is to upgrade to the latest version of TweenMax.

I'm not sure how a code pen would be of any help because the slider works perfectly on the computer.  It's when I try it on an iPad is when it breaks.  And what I provided is the actual slider code, but here it is again.

 

 

$("#schematic_slider").slider({
				range: false,
				min: 0,
				max: 100,
				step:0.1,
				value:0,
				slide: function ( event, ui ) {
					init.progress( ui.value/100 ).pause();
				}
			});          
			function updateSlider() {
				$("#schematic_slider").slider("value", init.progress() *100);
			}

[slider not working correctly on iPad.]

I've got an app that allows the user to move the timeline along when they move the 'scrubber' along the timeline.  However, on the iPad, it is incredibly glitchy and jumps from position to position and isn't smooth.  Why would this be operating like this?  When I test it in a browser, it works perfectly fine.  Here's the code for the slider.

$("#schematic_slider").slider({
				range: false,
				min: 0,
				max: 100,
				step:0.1,
				value:0,
				slide: function ( event, ui ) {
					init.progress( ui.value/100 ).pause();
				}
			});          
			function updateSlider() {
				$("#schematic_slider").slider("value", init.progress() *100);
			}

[Getting kinetic.js function arguments]

I have a function which draws lines using kinetic.js and canvas. I'm trying to find a certain argument from the function and write that argument to the console when I click on each line. How would I go about doing this?  FYI, I'm trying to get the argument outside of the function.

Kinetic

function drawLine(name, points, fill, stroke, closed, strokeWidth){
    window[name] = new Kinetic.Line({
        points: points,
        fill: fill,
        stroke: stroke,
        closed: closed,
        strokeWidth: strokeWidth
    });
}
drawLine("NST_R01", [938.4, 258.167, 868, 258.167], "", red, "", 3);

The argument I want to get is the name argument.

 

[Changing Kinetic sprite on tween finish.]

That's exactly what it was.  I actually figured that out right after I posted my question.

[Changing Kinetic sprite on tween finish.]

So this worked, I knew it was probably something like this.  However, the sprite isn't animating the way it needs to.  The DOM is accepting the change, however, it's not visually changing.  I have a console.log that prints the sprite's state and it's showing the change in the console, but not on the page.  Any ideas as to why it would be doing this?

[Changing Kinetic sprite on tween finish.]

I'm trying to get a Kinetic sprite to change it's animation after the tween it's attached to stops.  As of now the sprite changes when the tween starts.  Would this just be a callBack function?  I know how to do this with pure Kinetic, however, I'm using the KineticJS plugin for the controls.  I have my code included in a text file and the area I'm refering to is highlighted.  Anyone have some suggestions?

script.txt

[Tweening a line using KinteicJS Plugin]

Thank you both.  I like that plugin Carl, I didn't play around with it much over the weekend but I did look at it and I plan on toying with it more when I get the chance.  Thank you Jack for updating the plugin so fast, it works very well for what I'm trying to do.  You guys are awesome.

[Tweening a line using KinteicJS Plugin]

I'm getting an error that I'm not understanding.  I'm trying to animate a kinetic line, however, the line is not animating and I'm getting the following error:

 

TypeError: s.charAt is not a function                                       TweenMax.min.js: 16

 

Why am I getting this error?  I've attached my javascript file.

script.txt