Home/ Questions/Q 5986315
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-22T22:39:14+00:00

I have a range of animations (see code) that load on document load, i

  • 0

I have a range of animations (see code) that load on document load, i would like this to loop once it has played i have tried a few techniques but cant seem to get it right, could you please help me out !

$(function(){



//hide all elements
$('#ochreWrapper img').hide();
$('#ochreTextOne, #ochreTextTwo, #ochreTextThree').hide();


//css set everything outside of the frame



//animate in

var displayIDs = "img#imgPisa, img#imgBankChina, img#imgSydney, img#imgPetronas, img#imgBooks, img#imgKremlin, img#imgBridge, img#imgEmpire, img#imgLetterbox, img#imgTrafficLight, img#imgPavement, img#imgOchre, img#imgStephensTower, img#imgClouds, img#imgBus, img#imgRickshaw, img#imgPlane, img#imgPeople, img#imgWoman, img#swooshOne, img#swooshTwo, img#swooshThree";


$(displayIDs).css('display', 'block');
$(displayIDs).animate({ opacity: 0 }, 0);



//s1
$('img#imgPisa').css({ "bottom" : "-30px"}).animate({ "bottom": "0", "opacity": 1}, 1000 );
$('img#imgSydney').css({ "bottom" : "-40px" }).animate({ "bottom" : "0", "opacity": 1}, 1000 );
$('img#imgPavement').css({ "bottom" : "0" }).animate({ "bottom" : "3%", "opacity": 1}, 1000 );

//s2
$('img#imgBankChina').css({ "bottom" : "-30px"}).delay(500).animate({ "bottom": "0", "opacity": 1}, 1000 );
$('img#imgPetronas').css({ "bottom" : "5%"}).delay(500).animate({ "bottom": "12.1%", "opacity": 1}, 1000 );
$('img#imgLetterbox').css({ "bottom" : "-20px"}).delay(500).animate({ "bottom": "0%", "opacity": 1}, 1000 );
$('img#imgClouds').css({ "left" : "0"}).delay(500).animate({ "left": "0%", "opacity": 1}, 1000 ).delay(500).animate({ "left": "200px", "opacity" : 1 }, 25000);

//s3
$('img#imgKremlin').css({ "bottom" : "25%"}).delay(1000).animate({ "bottom": "34%", "opacity": 1}, 1000 );
$('img#imgOchre').css({ "bottom" : "0"}).delay(1000).animate({ "bottom": "7%", "opacity": 1}, 1000 );

//s4
$('img#imgBooks').css({ "bottom" : "13%"}).delay(1500).animate({ "bottom": "23%", "opacity": 1}, 1000 );
$('img#imgStephensTower').css({ "bottom" : "12%"}).delay(1500).animate({ "bottom": "22.5%", "opacity": 1}, 1000 );

//s5
$('img#imgBridge').css({ "bottom" : "36%"}).delay(2000).animate({ "bottom": "46%", "opacity": 1}, 1000 );

//s6
$('img#imgEmpire').css({ "bottom" : "38%"}).delay(2500).animate({ "bottom": "48.7%", "opacity": 1}, 1000 );
$('img#imgTrafficLight').css({ "bottom" : "-10px"}).delay(2500).animate({ "bottom": "3%", "opacity": 1}, 1000 );

//s7
$('img#imgBus').css({ "left" : "5%"}).delay(3000).animate({"opacity" : 1}).animate({ "left": "1000px", "opacity": 1, "bottom" : "50px"}, 7000);
$('img#imgPlane').delay(3000).animate({"opacity" : 1}).animate({ "left" : "80%", "opacity" : 1, "top" : "-75px" }, 20000);

//s8
$('img#imgRickshaw').css({ "left" : "5%"}).delay(4000).animate({"opacity" : 1}).animate({ "left": "1000px", "opacity": 1, "bottom" : "50px"}, 7000);

//s9
$('img#imgPeople, img#imgWoman').css({ "bottom" : "-20px" }).delay(10000).animate({"bottom" : "0", "opacity" : 1 }, 1000);

//s10
$('#ochreTextOne').delay(10000).fadeIn(1000).delay(10000).fadeOut(500);
$('img#swooshOne').delay(11000).animate({ "opacity" : 1 });
$('img#swooshOneOverlay').css({ "right" : "-300px", "display" : "block" }).delay(11000).animate({ "left" : "-100px" }, 10000, function(){ $(this).hide(); $('img#swooshOne').hide(); }) ;


//s11
$('#ochreTextTwo').css({ "padding-left" : "50px" }).delay(22000).fadeIn(1000).delay(10000).fadeOut(500);
$('img#swooshTwo').delay(22000).animate({ "opacity" : 1 });
$('img#swooshThree').delay(22000).animate({ "opacity" : 1 });
$('img#swooshTwoOverlay').css({ "right" : "-250px", "display" : "block" }).delay(22000).animate({ "left" : "-200px" }, 10000, function(){ $(this).hide(); $('img#swooshTwo, img#swooshThree').hide(); }) ;


//s12
$('#ochreTextThree').css({ "padding-left" : "50px" }).delay(33000).fadeIn(1000).delay(10000).fadeOut(500)

});

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I don’t know what you’ve tried, but using what you’ve got, put everything in a function, and call that function on load. On the last step of your animation, use a callback to call your animation again.

    $( function() {

    // Make a function for your animation stuff
    function doAnimation() {
       //All of your animation stuff

       // On your last animation step, use a callback to call the animation stuff again:
       $('#ochreTextThree').css({ "padding-left" : "50px"}).delay(33000).fadeIn(1000).delay(10000).fadeOut(500, doAnimation)

    }

    // Call the first iteration of your animation loop:
    doAnimation();

});
    • 0