Repower / Repower_CHosoWebApi

$(document).bind('ready ajaxComplete', function() {

    var timelineMenu = new TimelineLite()
    var fadeElement = $(".fadeIn__hiw");

    timelineMenu.staggerFromTo(fadeElement, .5, {
        opacity: 0,
        y: 50,
        ease: Power4.easeOut
    }, {
        opacity: 1,
        y: 0,
        ease: Power4.easeOut
    }, .070)

    timelineMenu.pause();

    function showSlider() {
        timelineMenu.play()
     }
    setTimeout(showSlider, 200);

    var fadeSlide = $('.home_fadeUp')
    var fadeArrow = $('.home_fadeLeft')

    var timelineSlider = new TimelineLite()
    var timelineArrow = new TimelineLite()

    timelineSlider.staggerFromTo(fadeSlide, 1, {
        opacity: 0,
        y: 50,
        ease: Power4.easeOut
    }, {
        opacity: 1,
        y: 0,
        ease: Power4.easeOut
    }, .14)

    timelineArrow.staggerFromTo(fadeArrow, 0.42, {
        opacity: 0,
        x: -50,
        ease: Power4.easeOut
    }, {
        opacity: 1,
        x: 0,
        ease: Power4.easeOut
    }, .14)


    timelineSlider.pause();
    timelineArrow.pause();

    /* function showIcons() {

     console.log('timelineMenu is playing')
     }
     setTimeout(showIcons, 1200);*/
    $(document).scroll(function() {
        if ($(window).scrollTop() >= $('.home-hero').height() - $('.home-slider').height()) {

            timelineSlider.play()

            setTimeout(function() {
                timelineArrow.play()
            }, 140)
        }
    })

    if ($(window).width() <= 1024) {
        $('.right-arrow').remove()
    }


    var animData = {
        container: document.getElementById('animation-container'),
        renderer: 'svg',
        loop: true,
        autoplay: true,
        path: 'img/card-animation.json'
    };
    /* var anim = bodymovin.loadAnimation(animData);

     var bikeStartData = {
     container: document.getElementById('animation-start'),
     renderer: 'svg',
     loop: true,
     autoplay: true,
     path: 'img/Ciclista_primo.json'
     };
     var bikeStart = bodymovin.loadAnimation(bikeStartData);


     var bikeEndData = {
     container: document.getElementById('animation-end'),
     renderer: 'svg',
     loop: true,
     autoplay: true,
     path: 'img/Ciclista_secondo.json'
     };
     var bikeEnd = bodymovin.loadAnimation(bikeEndData); */

    /* var controller = new ScrollMagic.Controller();
     // build tween
     var captionOne = $('.caption-one')
     var animationDuration = captionOne.height();
     var captionTwo = $('.caption-two');
     var tl = new TimelineMax();

     if ($(window).width() >= 768) {
     var tween =

     tl.add(TweenLite.to(".caption-one, #animation-start", animationDuration, {
     y: animationDuration
     }));

     tl.add(TweenLite.to(".caption-one", .5, {
     opacity: 0
     }));
     tl.add(TweenLite.to("#animation-start", .5, {
     opacity: 0
     }));
     tl.add(TweenLite.fromTo(
     ".caption-two", 1, {
     display:'none',
     autoAlpha: 0,
     y: 400
     }, {
     display:'flex',
     autoAlpha: 1,
     y: 0


     },"+=0.1"));


     tl.add(TweenLite.to("#animation-end", 1, {
     opacity: 1
     }));


     // build scene
     var scene = new ScrollMagic.Scene({
     triggerElement: "#trigger-element",
     duration: animationDuration - 50,
     triggerHook: 'onLeave',
     offset:-50,

     })
     .setTween(tween)
     .addTo(controller)

     } else{

     var tween =


     tl.to(
     ".caption-one, #animation-start, .caption-two , #animation-end",  animationDuration - 50, {
     y: animationDuration
     }
     )
     tl.to(
     ".caption-one",.5, {
     autoAlpha:0
     }
     )
     tl.to(
     "#animation-start", .5, {
     autoAlpha:0,
     display:'none'
     }
     )

     .fromTo(
     ".caption-two", 1, {
     display:'none',
     autoAlpha: 0,
     y: 400
     }, {
     display:'block',
     autoAlpha: 1,
     y: 0


     }, "+=0.1"
     )

     tl.to(
     "#animation-end", 1, {
     opacity: 1

     }, "+=0.1"
     )


     // build scene
     var scene = new ScrollMagic.Scene({
     triggerElement: "#trigger-element",
     duration: animationDuration - 50,
     triggerHook: 'onLeave',
     offset:-100,

     })
     .setTween(tween)
     .addTo(controller)
     }
     */

    var controller = new ScrollMagic.Controller({
        globalSceneOptions: {
            triggerHook: "onLeave"
        }
    });

    if ($(window).width() >= 768) {
        var pinani = new TimelineMax()

            .add([
                TweenMax.to("#animation-bike-one", .1, {
                    display: 'none',
                    opacity: 0
                }, "complete"),


                TweenMax.to(".animation-bike-text-one", .1, {
                    display: 'none',
                    autoAlpha: 0
                }),
            ])
            .add([
                TweenMax.fromTo(".animation-bike-text-two", .3, {
                    display: 'none',
                    autoAlpha: 0,
                    y: 400
                }, {
                    display: 'flex',
                    autoAlpha: 1,
                    y: 0
                }),
                TweenMax.fromTo("#animation-bike-two", .2, {
                    display: 'none',
                    autoAlpha: 0
                }, {
                    display: 'flex',
                    autoAlpha: 1
                }, "final")
            ])
    } else{
        var pinani = new TimelineMax()

            .add([
                TweenMax.to("#animation-bike-one", .1, {
                    display: 'none',
                    opacity: 0
                }, "complete"),


                TweenMax.to(".animation-bike-text-one", .1, {
                    display: 'none',
                    autoAlpha: 0
                }),
            ])
            .add([
                TweenMax.fromTo(".animation-bike-text-two", .3, {
                    display: 'none',
                    autoAlpha: 0,
                    y: 0
                }, {
                    display: 'flex',
                    autoAlpha: 1,
                    y: 0
                }),
                TweenMax.fromTo("#animation-bike-two", .2, {
                    display: 'none',
                    autoAlpha: 0
                }, {
                    display: 'flex',
                    autoAlpha: 1
                }, "final")
            ])
    }

    new ScrollMagic.Scene({
        triggerElement: "section#pin",
        duration: '60%'
    })
        .setTween(pinani)
        .setPin("section#pin")
        .addTo(controller);


})