https://www.cchr.org.hu/js/routes/ban-ect.js

1
2(function () {
3    // 'use strict';
4
5    JavascriptHandler.AddHandler(function () {
6        requireJS(['gsap', 'scrollmagic'], function () {
7            initScrolllMagic();
8        });
9    });
10
11
12    function initScrolllMagic() {
13        // var controller = new ScrollMagic.Controller({ globalSceneOptions: { triggerHook: "onEnter", duration: "200%" } });
14        var controller = new ScrollMagic.Controller({ globalSceneOptions: { triggerHook: "onEnter" } });
15
16        var deathRateBgTween = TweenMax.fromTo('.banect__index-death-rate--bg', 1,
17            {
18                autoAlpha: 0,
19            },
20            {
21                autoAlpha: 1,
22                ease: Linear.easeNone
23            },
24        );
25
26        var subtitleDeathrateTween = TweenMax.from('.banect__index-subtitle--deathrate', 1,
27            {
28                autoAlpha: 0,
29                y: 200,
30                ease: Linear.easeNone
31            },
32        );
33
34
35        // build scenes
36        new ScrollMagic.Scene({ triggerElement: ".banect__index-death-rate", duration: "100%" })
37            .setTween(deathRateBgTween)
38            // .addIndicators()
39            .addTo(controller);
40
41        new ScrollMagic.Scene({ triggerElement: ".banect__index-death-rate", duration: "50%" })
42            .setTween(subtitleDeathrateTween)
43            // .addIndicators()
44            .addTo(controller);
45
46
47        // Abuse fade
48
49        var eridicateAbuse = TweenMax.from('.banect__help-end-abuse--title', 1,
50            {
51                autoAlpha: 0,
52                y: 100,
53                ease: Linear.easeNone
54            },
55        );
56
57        new ScrollMagic.Scene({ triggerElement: ".banect__help-end-abuse", duration: "50%" })
58            .setTween(eridicateAbuse)
59            // .addIndicators()
60            .addTo(controller);
61
62        // Title Colors 
63        var eridicateAbuseRedColor = TweenMax.from('.banect__help-end-abuse--title .red', 1,
64            {
65                color: "#000000"
66            },
67        );
68
69        new ScrollMagic.Scene({ triggerElement: ".banect__help-end-abuse--title", duration: "100%", offset: 100 })
70            .setTween(eridicateAbuseRedColor)
71            // .addIndicators()
72            .addTo(controller);
73
74        var helpBlueColor = TweenMax.from('.banect__help-end-abuse--title .help-us-end', 1,
75            {
76                color: "#000000"
77            },
78        );
79
80        new ScrollMagic.Scene({ triggerElement: ".banect__help-end-abuse--title", duration: "100%", offset: 100 })
81            .setTween(helpBlueColor)
82            // .addIndicators()
83            .addTo(controller);
84
85        // CCHR LOGO
86
87        var cchrLOGO = TweenMax.from('.banect__help-end-abuse--logo img', 1,
88            {
89                autoAlpha: 0,
90                y: 100,
91                ease: Linear.easeNone
92            },
93        );
94
95        new ScrollMagic.Scene({ triggerElement: ".banect__help-end-abuse--logo", duration: "50%" })
96            .setTween(cchrLOGO)
97            // .addIndicators()
98            .addTo(controller);
99
100    }
101
102})();