CODEWITHSUNDEEP
jquerysvgjquery-svg
user3186297
user3186297

Reputation: 47

text animation "jumps" in svg

The I have a problem with animating text. I am trying to move a text from left to right. and let the text have a small "pause" in the middle and continue the rest of the animation again.

However my text "jumps" every time before and after an animation it moves a couple of px up or down and then goes to the correct height again which I defined through: text2.animate(3000, '', 3200).move(1299, 220) - This is just an example of course.

But the begin position and end position both are on the same height. So I don't understand why it "jumps". I hope you can help me with this problem because it's getting pretty annoying.

    var draw = SVG('animation').size(1299, 554)
    var nested = draw.nested()
    var line = draw.line(0, 260, 1299, 260).stroke({ width: 1 })

    var text2 = draw.text("The (jumping) bug")
    text2.move(0,220)

    text2.animate(7000, '', 1000).move(650, 220)
    .after(function moveTextR(){
    text2.animate(3000, '', 3200).move(1299, 220).after(function(){
        text2.animate(1, '', 2300).move(0, 220).after(function(){
            text2.clear()
            var tspan = text2.plain("something pink in the middle")
            text2.move(0,220)
            text2.animate(7000, '', 1000).move(650, 220).after(moveTextR)
        })
    })
})  
text2.font({
      family:   'Helvetica'
    , size:     32
    , anchor:   'start'
    , leading:  '1.5'
    , fill: '#000'
})

I've also made a jsfiddle: http://jsfiddle.net/HLA3b/

As you can see it jumps although in the jsfiddle it only jumps on beginning and on safari, chrome and firefox it jumps every time it begins a new animation.

Hope to get a helpful respond soon.

Thanks in advance!

Upvotes: 1

Views: 400

Answers (1)

Roberto
Roberto

Reputation: 9080

It seems a bug with svg.js 0.x version, I've modified the jsfiddle to use a more recent version and the "jump" doesn't happen.

http://jsfiddle.net/HLA3b/2/

Due to external resource link in JSFiddle, I've added a onload function with jQuery (SVG object was not found), but apart from that, your code works perfectly.

$(function() {

    var draw = SVG('animation').size(1299, 554)

(...)

    var text2 = draw.text('The (jumping) bug');
    text2.move(0,220)

    text2.animate(7000, '', 1000).move(650, 220).after(...)
})

I'm using the version: 1.0.rc3 It's the latest one that I found on CDN, but the current one for production is 1.0rc6.

Upvotes: 1

Related Questions