0

Animation BodyMovin svg starts before rendering images, so after rendering animation go to end. How do delay before start animation or true start animation only after rendering all images in animation?

Run animation with ScrollTrigger, because that i think images not download before start animation.

Site: http://test.eniso.ru

var ledData = { 
    container: document.getElementById('led-container'),
    renderer: 'svg',
    loop: false,
    autoplay: false,
    path: '/window.json'
};
var ledAnim = bodymovin.loadAnimation(ledData);
function playLED (animData) {
    ledAnim.play();
    ledAnim.setDirection(1);
    ledAnim.setSpeed(20);
}
ScrollTrigger.create({
trigger: ".container",
        markers: true,
        start: "top",
        scrub: true,
        pin: true,
        onEnter: playLED,
})
Eniso
  • 29
  • 4
  • Please clarify your specific problem or provide additional details to highlight exactly what you need. As it's currently written, it's hard to tell exactly what you're asking. – Community Sep 06 '22 at 19:30
  • Where is the image list? how does it look like? – IT goldman Sep 06 '22 at 20:50
  • sorry, i missed to detail. Run Animation bodymovin with ScrollTrigger – Eniso Sep 06 '22 at 20:55
  • @ITgoldman, i completed the question – Eniso Sep 06 '22 at 20:58
  • As I can see from the json file you linked there are 60 images. You can download the file, using ajax, parse the json, download each of the images (using `image.src = ...`) and only after `load` event of all the images you can call the `bodymovin.loadAnimation(ledData)`. Let know if you need help with a specific part of this plan – IT goldman Sep 06 '22 at 21:04

0 Answers0