digital-card/resources/js/petals.js

(function () {
    var falling = true;

    TweenLite.set("#container", { perspective: 600 })
    //TweenLite.set("img",{xPercent:"-50%",yPercent:"-50%"})

    var total = 10;
    var container = document.getElementById("container"), w = window.innerWidth, h = window.innerHeight;

    for (let i = 0; i < total; i++) {
        var Div = document.createElement('div');
        var Div2 = document.createElement('div');
        var Div3 = document.createElement('div');
        TweenLite.set(Div, { attr: { class: 'dot' }, x: R(0, w), y: R(-200, -150), z: R(-200, 200), xPercent: "-50%", yPercent: "-50%" });
        TweenLite.set(Div2, { attr: { class: 'dot2' }, x: R(0, w), y: R(-200, -150), z: R(-200, 200), xPercent: "-50%", yPercent: "-50%" });
        TweenLite.set(Div3, { attr: { class: 'dot3' }, x: R(0, w), y: R(-200, -150), z: R(-200, 200), xPercent: "-50%", yPercent: "-50%" });
        container.appendChild(Div);
        container.appendChild(Div2);
        container.appendChild(Div3);
        animm(Div);
        animm2(Div2);
        animm3(Div3);
    }

    function animm(elm) {
        TweenMax.to(elm, R(6, 15), { y: h + 100, ease: Linear.easeNone, repeat: -1, delay: -15 });
        TweenMax.to(elm, R(4, 8), { x: '+=100', rotationZ: R(0, 180), repeat: -1, yoyo: true, ease: Sine.easeInOut });
        TweenMax.to(elm, R(2, 8), { repeat: -1, yoyo: true, ease: Sine.easeInOut, delay: -5 });
    };
    function animm2(elm) {
        TweenMax.to(elm, R(6, 15), { y: h + 100, ease: Linear.easeNone, repeat: -1, delay: -25 });
        TweenMax.to(elm, R(4, 8), { x: '+=100', rotationZ: R(0, 180), repeat: -1, yoyo: true, ease: Sine.easeInOut });
        TweenMax.to(elm, R(2, 8), { repeat: -1, yoyo: true, ease: Sine.easeInOut, delay: -5 });
    };
    function animm3(elm) {
        TweenMax.to(elm, R(6, 15), { y: h + 100, ease: Linear.easeNone, repeat: -1, delay: -5 });
        TweenMax.to(elm, R(4, 8), { x: '+=100', rotationZ: R(0, 180), repeat: -1, yoyo: true, ease: Sine.easeInOut });
        TweenMax.to(elm, R(2, 8), { repeat: -1, yoyo: true, ease: Sine.easeInOut, delay: -5 });
    };

    function R(min, max) { return min + Math.random() * (max - min) };

})();