JS Performance issue [Skrollr Lib]

Question

I've been recently trying out a library for js called Skrollr. I can simply use it for different effects while scrolling a page, such as fade outs, etc.

I faced a real performance issue and at first, i thought it's just because of my images and I tried to compress everything down to just 180mb~! but it lags like hell when you try to scroll.

here is where i think it happens:

while (i < Images.length) {

    empty = Math.random().toString(36).substring(7);
    to = Creating(to, 0, Images[i], empty);

    i++;
}

and the Creating function is pretty stright forward too!

function Creating(from, config, url, name) {

let to = 0;

if (config === 0) {

    $('#slide').append('<div class="item" id="' + name + '"></div>');
    let mydiv = $("#" + name + "");

    //first create a structure for your data with jquery
    mydiv.attr('data--' + from + '-top', 'opacity: 0;');
    from += 800;
    mydiv.attr('data--' + from + '-top', 'opacity: 0;');
    from += 400;
    mydiv.attr('data--' + from + '-top', 'opacity: 1;');
    mydiv.attr('data-anchor-target', '#slide');
    mydiv.html('<img id="img" src="' + url + '"' +
        'style="width: 1000px;">');

    to = from;

......bla bla

return to;

you get the idea. if the length of my image array is about 100, it sorta works but still not smooth! and the original size of the array is about 250. how can I fix this performance issue? any sort of solution is much appreciated. please visit this repo for the full story: https://github.com/codacy20/SkrollWebsite/blob/master/app.js