https://www.jynarque.com/sites/g/files/qhldwo12166/themes/site/the…/gs-animation/gs-animation.settings.js

1"use strict";
2
3(function ($, Drupal) {
4  Drupal.behaviors.GSAnimation = {
5    attach: function attach(context, settings) {
6      $(once('GSAnimation', "#desContainer_C2")).each(function () {
7        gsap.registerPlugin(MotionPathPlugin, DrawSVGPlugin);
8        var desLineArrows = {
9          c2: {
10            a1: {
11              selector: "#desLineArrow1_C2",
12              template: "#desLine1Template_C2",
13              path: "#desLine1Path_C2"
14            },
15            a2: {
16              selector: "#desLineArrow2_C2",
17              template: "#desLine2Template_C2",
18              path: "#desLine2Path_C2"
19            }
20          }
21        };
22        var desPics = {
23          c2: {
24            p1: "#desPic1_C2",
25            p2: "#desPic2_C2",
26            p3: "#desPic3_C2",
27            p4: "#desPic4_C2"
28          }
29        };
30        gsap.set("#desLineArrow1_C2 path", {
31          fill: "#9ba934"
32        });
33        gsap.set(".des-pic", {
34          autoAlpha: 0
35        });
36        gsap.set(desPics.c2.p1, {
37          autoAlpha: 1
38        });
39        gsap.set(".des-line--arrow", {
40          visibility: "visible",
41          autoAlpha: 0
42        });
43        gsap.set(".des-line--path", {
44          visibility: "visible",
45          drawSVG: "0"
46        });
47        var tl = gsap.timeline({
48          onUpdate: updateSlider
49        });
50        $('#timeRange').rangeslider({
51          polyfill: false,
52          onSlide: function onSlide(position, value) {
53            tl.progress(value).pause();
54          }
55        });
56        tl.progress(0).pause();
57        var arrowFirstSettings = {
58          state1: {
59            fill: "#9ba934",
60            duration: 2,
61            ease: "none"
62          },
63          state2: {
64            fill: "#D12229",
65            duration: 3,
66            ease: "power1.out"
67          }
68        };
69        goArrowAnimation(desLineArrows.c2.a1.selector, desLineArrows.c2.a1.template, desLineArrows.c2.a1.path, 0.25, 1, "none", arrowFirstSettings);
70        var customEase = CustomEase.create("custom", "M0,0,C0,0,0.238,0.275,0.372,0.45,0.424,0.518,0.462,0.552,0.514,0.614,0.56,0.67,0.583,0.685,0.634,0.736,0.677,0.779,0.711,0.816,0.76,0.854,0.797,0.882,0.805,0.887,0.846,0.912,0.886,0.936,0.902,0.944,0.934,0.9

7066,0.967,0.989,1,1,1,1");
71        goArrowAnimation(desLineArrows.c2.a2.selector, desLineArrows.c2.a2.template, desLineArrows.c2.a2.path, 0.28, 0.97, customEase);
72        var defaultSceneWidth = 810;
73        var defaultSceneHeight = 450;
74        var defaultTimelineHeight = 60;
75        var sceneSelector = $('.disease-education-slider .scene');
76        var sceneWrapperSelector = $('.disease-education-slider .scene-wrapper');
77        var timelineWrapperSelector = $('.disease-education-slider .timeline-wrapper');
78        var timelineTextSelector = $('.disease-education-slider .timeline-text');
79        sceneWrapperSelector.css('opacity', '1');
80        setSceneScale();
81        $(window).resize(function () {
82          setSceneScale();
83        });
84        var timelineWrapper = $('.timeline-wrapper');
85        timelineWrapper.on('mouseenter touchstart', '.rangeslider__handle', function () {
86          timelineWrapper.find('input[type="range"]').addClass('pulsation-disabled');
87        });
88        timelineWrapper.on('focusin', 'input[type="range"]', function () {
89          $(this).addClass('pulsation-disabled');
90        });
91
92        function goArrowAnimation(arrowSelector, templateSelector, pathSelector) {
93          var start = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
94          var end = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 1;
95          var ease = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : "none";
96          var arrowSettings = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : false;
97          var drawStart = (start * 100).toString() + "%";
98          var drawEnd = (end * 100).toString() + "%";
99          gsap.to(arrowSelector, {
100            autoAlpha: 1,
101            duration: 0.5
102          });
103          gsap.set(pathSelector, {
104            drawSVG: "0 " + drawStart
105          });
106          tl.to(arrowSelector, {
107            duration: 5,
108            ease: ease,
109            immediateRender: true,
110            motionPath: {
111              path: templateSelector,
112              align: templateSelector,
113              autoRotate: true,
114              alignOrigin: [0.5, 0.5],
115              start: start,
116              end: end
117            }
118          }, 0).to(pathSelector, {
119            drawSVG: drawEnd,
120            duration: 5,
121            ease: ease
122          }, 0);
123
124          if (arrowSettings.hasOwnProperty('state1')) {
125            tl.to(arrowSelector + " path", {
126              fill: arrowSettings.state1.fill,
127              duration: arrowSettings.state1.duration,
128              ease: arrowSettings.state1.ease
129            }, 0);
130          }
131
132          if (arrowSettings.hasOwnProperty('state2')) {
133            tl.to(arrowSelector + " path", {
134              fill: arrowSettings.state2.fill,
135              duration: arrowSettings.state2.duration,
136              ease: arrowSettings.state2.ease
137            }, arrowSettings.state1.duration);
138          }
139        }
140
141        function fadePictureAnimation(picSelector, position, progress) {
142          if (progress >= position) {
143            gsap.to(picSelector, {
144              autoAlpha: 1
145            });
146          } else {
147            gsap.to(picSelector, {
148              autoAlpha: 0
149            });
150          }
151        }
152
153        function updateSlider() {
154          fadePictureAnimation(desPics.c2.p2, 0.1, tl.progress());
155          fadePictureAnimation(desPics.c2.p3, 0.3, tl.progress());
156          fadePictureAnimation(desPics.c2.p4, 0.6, tl.progress());
157        }
158
159        function setSceneScale() {
160          var sceneWrapperWidth = sceneWrapperSelector.width();
161
162          if (sceneWrapperWidth < defaultSceneWidth) {
163            var sceneScale = sceneWrapperWidth / defaultSceneWidth;
164            var sceneTranslateX = (1 - sceneScale) * 100 / 2;
165            sceneSelector.css({
166              'transform': 'translateX(-' + sceneTranslateX + '%) translateY(' + sceneTranslateX + '%) scale(' + sceneScale + ')'
167            });
168            sceneWrapperSelector.height(defaultSceneHeight * sceneScale);
169            timelineTextSelector.height(defaultTimelineHeight * sceneScale);
170            timelineWrapperSelector.css({
171              'bottom': defaultTimelineHeight * sceneScale
172            });
173          } else {
174            sceneSelector.css('transform', 'none');
175            sceneWrapperSelector.height(defaultSceneHeight);
176            timelineTextSelector.height(defaultTimelineHeight);
177            timelineWrapperSelector.css('bottom', defaultTimelineHeight);
178          }
179        }
180      });
181    }
182  };
183})(jQuery, Drupal);