CODEWITHSUNDEEP
jqueryhtmlcsssvgload
Nalepa
Nalepa

Reputation: 11

How can I load another HTML page when SVG animation is finished?

I have a HTML page (animation.html) with a SVG animation inside of it. The animation runs ca. 5 seconds and I would like to load another HTML page (website.html) when the SVG animation is finished.

I tried using jQuery's load-function but it doesn't work.

Any ideas?

Upvotes: 1

Views: 668

Answers (4)

michaPau
michaPau

Reputation: 1648

As a solution you can add an end transition handler to the last path transition in your SVG. So you do not depend on setTimeout and you can be sure that your animation has actually ended - in case you'll change the duration for example)

See the created jsfiddle

the code inserted in your fiddle:

if(a === this.paths.length - 1) {
    b.addEventListener(e, function (event) {
        alert("end last transition");
        document.location.href = 'https://www.google.fr/';
    });
}

There's a check in the loop if it's the last path (line: 153 in the fiddle) it than calls an alert and redirects to google.fr. (The redirect doesn't work from fiddle because google doesn't allow cross-origin).

There might be a better solution but the code is actually kinda hard to debug. All objects, variables etc. are called a,b,c etc. what makes it a bit difficult to update...

Upvotes: 1

Ghulam Ali
Ghulam Ali

Reputation: 1935

My recommendation would be to first wait till the SVG is loaded and then put the timer to move the user to other page. Try this:

$('#your_svg_id').load('sample.svg', function(data){
    //svg loaded.
    setTimeout(function(){
        window.location='http://redirecthere.com';
    }, 5000); //5seconds
});

Upvotes: 0

Nalepa
Nalepa

Reputation: 11

I've tried this: setTimeout("location.href = 'www.url.com';",5000); and it works fine.

Upvotes: 0

Divyesh Savaliya
Divyesh Savaliya

Reputation: 2740

You can do it in javascript

setTimeout("location.href = 'http://www.url.com';",300);

Upvotes: 0

Related Questions