Анимация блоков сайта на ScrollMagik

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.4/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/debug.addIndicators.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.3/plugins/animation.gsap.js"></script>

JS

//паралакс анимация
(function () {
    $(document).ready(function () {
        var controller = new ScrollMagic.Controller();

        //интро
        var tween = new TimelineMax()
            .add(TweenMax.to(".intro .title-big, .intro .miniature", 2, {opacity: 0}, {opacity: 1}));
        new ScrollMagic.Scene({triggerElement: ".intro", duration: 500, triggerHook: 0})
            .setTween(tween)
            .addTo(controller);
        
        //звезды
        var tween = new TimelineMax()
            .add(TweenMax.to(".about .stars", 2, {opacity: 0}, {opacity: 1}));
        new ScrollMagic.Scene({triggerElement: ".about", duration: 500, offcet: 300, triggerHook: 0})
            .setTween(tween)
            .addTo(controller);
        
        //о нас
        var tween = new TimelineMax()
            .add(TweenMax.from(".about", 0.7, {top: 300}, {top: 1}));
        new ScrollMagic.Scene({triggerElement: ".about", offset: 150, triggerHook: "onEnter"})
            .setTween(tween)
            .addTo(controller);
        
        var tween = new TimelineMax()
            .add(TweenMax.from(".about .description-about", 200, {opacity: 0}, {opacity: 1}));
        new ScrollMagic.Scene({triggerElement: ".about", duration: 500, triggerHook: "onCenter"})
            .setTween(tween)
            .addTo(controller);
        
        //об инвестициях
        var tween = new TimelineMax()
            .add(TweenMax.from(".invest-info .title-big", 0.7, {opacity: 0}, {opacity: 1}));
        new ScrollMagic.Scene({triggerElement: ".invest-info", duration: "100%", offset: 200, triggerHook: "onEnter"})
            .setTween(tween)
            .addTo(controller);
        
        var tween = new TimelineMax()
            .add(TweenMax.from(".invest-info .descr-cont .two-item", 0.7, {opacity: 0}, {opacity: 1}));
        new ScrollMagic.Scene({triggerElement: ".invest-info", duration: "100%", offset: 200, triggerHook: "onEnter"})
            .setTween(tween)
            .addTo(controller);
        
        
        
        //раскрытие информации
        $(function() {
            var brands = document.querySelectorAll(".information-big");
            for (var i = 0; i < brands.length; i++) {
                var tween = new TimelineMax()
                    .add(TweenMax.from(brands[i], 10, {opacity: 0}, {opacity: 1}), 0.3);

                new ScrollMagic.Scene({triggerElement: brands[i], duration: 200, offset: 150, triggerHook: "onEnter"})
                    .setTween(tween)
                    .addTo(controller)
            }
        });
        
        //фонды
        $(function() {
            var brands = document.querySelectorAll(".page-funds ol li");
            for (var i = 0; i < brands.length; i++) {
                var tween = new TimelineMax()
                    .add(TweenMax.from(brands[i], 10, {opacity: 0}, {opacity: 1}), 0.3);

                new ScrollMagic.Scene({triggerElement: brands[i], duration: 200, offset: 150, triggerHook: "onEnter"})
                    .setTween(tween)
                    .addTo(controller)
            }
        });
        
        //этапы
        $(function() {
            var brands = document.querySelectorAll(".features-item");
            for (var i = 0; i < brands.length; i++) {
                var tween = new TimelineMax()
                    .add(TweenMax.from(brands[i], 10, {opacity: 0}, {opacity: 1}), 0.3);

                new ScrollMagic.Scene({triggerElement: brands[i], duration: 200, offset: 150, triggerHook: "onEnter"})
                    .setTween(tween)
                    .addTo(controller)
            }
        });
        
        //новости
        var tween = new TimelineMax()
            .add(TweenMax.from(".news .title-big", 2, {opacity: 0}, {opacity: 1}));
        new ScrollMagic.Scene({triggerElement: ".news", duration: 400, offset: 300, triggerHook: "onEnter"})
            .setTween(tween)
            .addTo(controller);
        
        $(function() {
            var brands = document.querySelectorAll(".news-item");
            for (var i = 0; i < brands.length; i++) {
                var tween = new TimelineMax()
                    .add(TweenMax.from(brands[i], 2, {opacity: 0}, {opacity: 1}));

                new ScrollMagic.Scene({triggerElement: brands[i], duration: 200, offset: 150, triggerHook: "onEnter"})
                    .setTween(tween)
                    .addTo(controller)
            }
        });
        
        //контакты
        var tween = new TimelineMax()
            .add(TweenMax.from(".contacts", 1, {opacity: 0}, {opacity: 1}));
        new ScrollMagic.Scene({triggerElement: ".contacts", duration: 200, offset: 150, triggerHook: "onEnter"})
            .setTween(tween)
            .addTo(controller);
    });
})();
//паралакс анимация
Контакты

Работаем: с ПН по ПТ, с 08:00 до 17:00 (МСК)
Отдыхаем: в СБ и ВС, чтобы быть в тонусе
и реализовывать самые сложные идеи