1

I have a svg image inside this object:

<object id="firstrule" type="image/svg+xml" data="/assets/rules/pertinance.svg"></object>

I want to make it appear on scroll with an animation. I have coded the good callback for the scroll, and now I'm stuck with how to make the animation.

The animation would be: in the beginning, the svg has 0 width, and when the callback is triggered, the svg now takes its normal size of 100%. The animation should takes 3 second, and during those 3 seconds, we can see the image changing size from 0 to 100%.

To do this, I tried the following thing: 1) Set a width attribute to my object "firstrule" of 0%

<object id="firstrule" type="image/svg+xml" data="/assets/rules/pertinance.svg" width="0%"></object>

And 2) Triggering an animation with jquery

$('#firstrule').animate({'width':'100%'},3000);

It doesn't work, and I got this error on my browser's console: TypeError: Cannot set property 'cur' of undefined

Do you know another solution (maybe using CSS3?), or how to fix this? I'd like an easy solution, not to bother with a lot of lines, nor any plugin. I'm pretty sure that it is possible to overcome this issue lightly.

2 Answers 2

1

Simple workaround: Place the <object> with your SVG image inside a wrapping <div>. Then animate the container and not the object.

<style>
    #wrapper { width: 0; }
    #firstrule { width: 100%; height: 100%; }
</style>

<div id="wrapper">
    <object id="firstrule" 
        type="image/svg+xml" 
        data="/assets/rules/pertinance.svg">
    </object>
</div>

<script>
    function animate() {
        $("#wrapper").animate({ width: "100%" }, 3000);
    }
</script>


JSFiddle

3
  • Exactly what I wanted ! Between, would you mind explaining me why should we set the svg inside a wrapper please?
    – sidney
    May 29, 2014 at 7:14
  • The wrapper is necessary because it's obviously not possible to animate <object> elements directly with jQuery. However, even though I checked the relevant parts in the jQuery source, I can't explain to you why that is...
    – Aletheios
    May 29, 2014 at 12:35
  • Indeed, it is not possible, but possible by using Hristo Georgiev solution using pure js (setInterval). It's weird
    – sidney
    May 29, 2014 at 12:37
1

If you want to directly interact with the object, you can always rely on the good ol' javascript:

var i = 0;

var repeat

function animate() {


    repeat = setInterval(function () {
        add();
    }, 1);

    function add() {
        document.getElementById("firstrule").style.width = i + '%';
        document.getElementById("firstrule").style.height = i + '%';
        i++;
        if (i >= 100) {
            clearInterval(repeat);
        }
    }


}

JSFIDDLE

1
  • This is by far the most ingenious solution, thanks you. But the animatin doesn't stop after three seconds, and I need something simpler, so I chose Aletheios answer ;)
    – sidney
    May 29, 2014 at 7:12

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.