File: /var/www/quadcode.com/src/components/blocks/turnkey-solution/Work.svelte
<script lang="ts">
import work from '../../../assets/images/turnkey-solution/work.png';
import img1 from '../../../assets/images/turnkey-solution/work/1.webp';
import img3 from '../../../assets/images/turnkey-solution/work/3.webp';
import img5 from '../../../assets/images/turnkey-solution/work/5.webp';
import Button from '../../button/Button.svelte';
import { onMount } from 'svelte';
import { isMobile, popupForm } from '../../../store.js';
import { t } from '$lib/translations';
let mobile = false;
isMobile.subscribe((value) => {
mobile = value;
});
onMount(() => {
const classControlYou = (add) => {
const animation = document.querySelector('.block-work__animation');
if (!animation) {
return;
}
if (add) {
animation.classList.add('you');
} else {
animation.classList.remove('you');
}
};
const classControlQuadcode = (add) => {
const animation = document.querySelector('.block-work__animation');
if (!animation) {
return;
}
if (add) {
animation.classList.add('quadcode');
} else {
animation.classList.remove('quadcode');
}
};
if (!mobile) {
const blockEl2 = document.getElementById('block-work__animation_container2');
const blockEl4 = document.getElementById('block-work__animation_container4');
const blockEl6 = document.getElementById('block-work__animation_container6');
const blockQuadcode = document.querySelector('.block-work__block.quadcode');
const itemQuadcode = document.querySelector('.block-work__animationContentItem.quadcode');
const blockYou = document.querySelector('.block-work__block.you');
const itemYou = document.querySelector('.block-work__animationContentItem.you');
if (blockQuadcode) {
blockQuadcode.addEventListener('mouseenter', () => classControlQuadcode(true));
blockQuadcode.addEventListener('mouseleave', () => classControlQuadcode(false));
}
if (itemQuadcode) {
itemQuadcode.addEventListener('mouseenter', () => classControlQuadcode(true));
itemQuadcode.addEventListener('mouseleave', () => classControlQuadcode(false));
}
if (blockYou) {
blockYou.addEventListener('mouseenter', () => classControlYou(true));
blockYou.addEventListener('mouseleave', () => classControlYou(false));
}
if (itemYou) {
itemYou.addEventListener('mouseenter', () => classControlYou(true));
itemYou.addEventListener('mouseleave', () => classControlYou(false));
}
if (blockEl2) {
function anim2(cjs, an) {
var p; // shortcut to reference prototypes
var lib = {};
var ss = {};
var img = {};
lib.ssMetadata = [];
(lib.AnMovieClip = function () {
this.actionFrames = [];
this.ignorePause = false;
this.gotoAndPlay = function (positionOrLabel) {
cjs.MovieClip.prototype.gotoAndPlay.call(this, positionOrLabel);
};
this.play = function () {
cjs.MovieClip.prototype.play.call(this);
};
this.gotoAndStop = function (positionOrLabel) {
cjs.MovieClip.prototype.gotoAndStop.call(this, positionOrLabel);
};
this.stop = function () {
cjs.MovieClip.prototype.stop.call(this);
};
}).prototype = p = new cjs.MovieClip();
// symbols:
// helper functions:
function mc_symbol_clone() {
var clone = this._cloneProps(new this.constructor(this.mode, this.startPosition, this.loop, this.reversed));
clone.gotoAndStop(this.currentFrame);
clone.paused = this.paused;
clone.framerate = this.framerate;
return clone;
}
function getMCSymbolPrototype(symbol, nominalBounds, frameBounds) {
var prototype = cjs.extend(symbol, cjs.MovieClip);
prototype.clone = mc_symbol_clone;
prototype.nominalBounds = nominalBounds;
prototype.frameBounds = frameBounds;
return prototype;
}
(lib.Path_1 = function (mode, startPosition, loop, reversed) {
if (loop == null) {
loop = true;
}
if (reversed == null) {
reversed = false;
}
var props = new Object();
props.mode = mode;
props.startPosition = startPosition;
props.labels = {};
props.loop = loop;
props.reversed = reversed;
cjs.MovieClip.apply(this, [props]);
// Layer_1
this.shape = new cjs.Shape();
this.shape.graphics.f('#E62334').s().p('AhwgTIDgjDIAADqIjgDDg');
this.shape.setTransform(11.55, 21.45);
this.timeline.addTween(cjs.Tween.get(this.shape).wait(1));
this._renderFirstFrame();
}).prototype = getMCSymbolPrototype(lib.Path_1, new cjs.Rectangle(0.3, 0, 22.5, 42.9), null);
(lib.Path = function (mode, startPosition, loop, reversed) {
if (loop == null) {
loop = true;
}
if (reversed == null) {
reversed = false;
}
var props = new Object();
props.mode = mode;
props.startPosition = startPosition;
props.labels = {};
props.loop = loop;
props.reversed = reversed;
cjs.MovieClip.apply(this, [props]);
// Layer_1
this.shape = new cjs.Shape();
this.shape.graphics.f('#E62334').s().p('AiDA3IAAjqIEHB9IAADqg');
this.shape.setTransform(13.2, 17.975);
this.timeline.addTween(cjs.Tween.get(this.shape).wait(1));
this._renderFirstFrame();
}).prototype = getMCSymbolPrototype(lib.Path, new cjs.Rectangle(0, 0, 26.4, 36), null);
(lib.Symbol2 = function (mode, startPosition, loop, reversed) {
if (loop == null) {
loop = true;
}
if (reversed == null) {
reversed = false;
}
var props = new Object();
props.mode = mode;
props.startPosition = startPosition;
props.labels = {};
props.loop = loop;
props.reversed = reversed;
cjs.MovieClip.apply(this, [props]);
// Layer_1
this.instance = new lib.Path();
this.instance.setTransform(22.4, 11.2, 0.627, 0.627, 0, 0, 0, 13.2, 17.9);
this.instance.alpha = 0.3008;
this.instance_1 = new lib.Path_1();
this.instance_1.setTransform(6.95, 13.75, 0.627, 0.627, 0, 0, 0, 11.4, 21.9);
this.instance_1.alpha = 0.1992;
this.timeline.addTween(
cjs.Tween.get({})
.to({ state: [{ t: this.instance_1 }, { t: this.instance }] })
.wait(1)
);
this._renderFirstFrame();
}).prototype = getMCSymbolPrototype(lib.Symbol2, new cjs.Rectangle(0, 0, 30.7, 26.9), null);
(lib.arrows_fly_mc = function (mode, startPosition, loop, reversed) {
if (loop == null) {
loop = true;
}
if (reversed == null) {
reversed = false;
}
var props = new Object();
props.mode = mode;
props.startPosition = startPosition;
props.labels = {};
props.loop = loop;
props.reversed = reversed;
cjs.MovieClip.apply(this, [props]);
// Symbol_2_copy
this.instance = new lib.Symbol2();
this.instance.setTransform(15.3, -16.35, 1, 1, 0, 0, 0, 15.3, 13.5);
this.timeline.addTween(
cjs.Tween.get(this.instance)
.wait(1)
.to({ y: -18, alpha: 0.9444 }, 0)
.wait(1)
.to({ y: -19.65, alpha: 0.8889 }, 0)
.wait(1)
.to({ y: -21.3, alpha: 0.8333 }, 0)
.wait(1)
.to({ y: -22.95, alpha: 0.7778 }, 0)
.wait(1)
.to({ y: -24.6, alpha: 0.7222 }, 0)
.wait(1)
.to({ y: -26.3, alpha: 0.6667 }, 0)
.wait(1)
.to({ y: -27.95, alpha: 0.6111 }, 0)
.wait(1)
.to({ y: -29.6, alpha: 0.5556 }, 0)
.wait(1)
.to({ y: -31.25, alpha: 0.5 }, 0)
.wait(1)
.to({ y: -32.9, alpha: 0.4444 }, 0)
.wait(1)
.to({ y: -34.6, alpha: 0.3889 }, 0)
.wait(1)
.to({ y: -36.25, alpha: 0.3333 }, 0)
.wait(1)
.to({ y: -37.9, alpha: 0.2778 }, 0)
.wait(1)
.to({ y: -39.55, alpha: 0.2222 }, 0)
.wait(1)
.to({ y: -41.2, alpha: 0.1667 }, 0)
.wait(1)
.to({ y: -42.9, alpha: 0.1111 }, 0)
.wait(1)
.to({ y: -44.55, alpha: 0.0556 }, 0)
.wait(1)
.to({ y: -46.2, alpha: 0 }, 0)
.to({ _off: true }, 1)
.wait(41)
);
// Symbol_2
this.instance_1 = new lib.Symbol2();
this.instance_1.setTransform(15.3, 13.5, 1, 1, 0, 0, 0, 15.3, 13.5);
this.instance_1.alpha = 0;
this.instance_1._off = true;
this.timeline.addTween(
cjs.Tween.get(this.instance_1)
.wait(19)
.to({ _off: false }, 0)
.wait(1)
.to({ y: 12.05, alpha: 0.05 }, 0)
.wait(1)
.to({ y: 10.55, alpha: 0.1 }, 0)
.wait(1)
.to({ y: 9.05, alpha: 0.15 }, 0)
.wait(1)
.to({ y: 7.55, alpha: 0.2 }, 0)
.wait(1)
.to({ y: 6.05, alpha: 0.25 }, 0)
.wait(1)
.to({ y: 4.55, alpha: 0.3 }, 0)
.wait(1)
.to({ y: 3.05, alpha: 0.35 }, 0)
.wait(1)
.to({ y: 1.55, alpha: 0.4 }, 0)
.wait(1)
.to({ y: 0.1, alpha: 0.45 }, 0)
.wait(1)
.to({ y: -1.4, alpha: 0.5 }, 0)
.wait(1)
.to({ y: -2.9, alpha: 0.55 }, 0)
.wait(1)
.to({ y: -4.4, alpha: 0.6 }, 0)
.wait(1)
.to({ y: -5.9, alpha: 0.65 }, 0)
.wait(1)
.to({ y: -7.4, alpha: 0.7 }, 0)
.wait(1)
.to({ y: -8.9, alpha: 0.75 }, 0)
.wait(1)
.to({ y: -10.4, alpha: 0.8 }, 0)
.wait(1)
.to({ y: -11.85, alpha: 0.85 }, 0)
.wait(1)
.to({ y: -13.35, alpha: 0.9 }, 0)
.wait(1)
.to({ y: -14.85, alpha: 0.95 }, 0)
.wait(1)
.to({ y: -16.35, alpha: 1 }, 0)
.wait(1)
.to({ y: -17.85, alpha: 0.95 }, 0)
.wait(1)
.to({ y: -19.35, alpha: 0.9 }, 0)
.wait(1)
.to({ y: -20.85, alpha: 0.85 }, 0)
.wait(1)
.to({ y: -22.35, alpha: 0.8 }, 0)
.wait(1)
.to({ y: -23.8, alpha: 0.75 }, 0)
.wait(1)
.to({ y: -25.3, alpha: 0.7 }, 0)
.wait(1)
.to({ y: -26.8, alpha: 0.65 }, 0)
.wait(1)
.to({ y: -28.3, alpha: 0.6 }, 0)
.wait(1)
.to({ y: -29.8, alpha: 0.55 }, 0)
.wait(1)
.to({ y: -31.3, alpha: 0.5 }, 0)
.wait(1)
.to({ y: -32.8, alpha: 0.45 }, 0)
.wait(1)
.to({ y: -34.3, alpha: 0.4 }, 0)
.wait(1)
.to({ y: -35.75, alpha: 0.35 }, 0)
.wait(1)
.to({ y: -37.25, alpha: 0.3 }, 0)
.wait(1)
.to({ y: -38.75, alpha: 0.25 }, 0)
.wait(1)
.to({ y: -40.25, alpha: 0.2 }, 0)
.wait(1)
.to({ y: -41.75, alpha: 0.15 }, 0)
.wait(1)
.to({ y: -43.25, alpha: 0.1 }, 0)
.wait(1)
.to({ y: -44.75, alpha: 0.05 }, 0)
.wait(1)
.to({ y: -46.25, alpha: 0 }, 0)
.wait(1)
);
// Symbol_2
this.instance_2 = new lib.Symbol2();
this.instance_2.setTransform(15.3, 13.5, 1, 1, 0, 0, 0, 15.3, 13.5);
this.instance_2.alpha = 0;
this.timeline.addTween(
cjs.Tween.get(this.instance_2)
.wait(1)
.to({ y: 12, alpha: 0.0526 }, 0)
.wait(1)
.to({ y: 10.45, alpha: 0.1053 }, 0)
.wait(1)
.to({ y: 8.95, alpha: 0.1579 }, 0)
.wait(1)
.to({ y: 7.4, alpha: 0.2105 }, 0)
.wait(1)
.to({ y: 5.85, alpha: 0.2632 }, 0)
.wait(1)
.to({ y: 4.35, alpha: 0.3158 }, 0)
.wait(1)
.to({ y: 2.8, alpha: 0.3684 }, 0)
.wait(1)
.to({ y: 1.25, alpha: 0.4211 }, 0)
.wait(1)
.to({ y: -0.25, alpha: 0.4737 }, 0)
.wait(1)
.to({ y: -1.8, alpha: 0.5263 }, 0)
.wait(1)
.to({ y: -3.35, alpha: 0.5789 }, 0)
.wait(1)
.to({ y: -4.85, alpha: 0.6316 }, 0)
.wait(1)
.to({ y: -6.4, alpha: 0.6842 }, 0)
.wait(1)
.to({ y: -7.9, alpha: 0.7368 }, 0)
.wait(1)
.to({ y: -9.45, alpha: 0.7895 }, 0)
.wait(1)
.to({ y: -11, alpha: 0.8421 }, 0)
.wait(1)
.to({ y: -12.5, alpha: 0.8947 }, 0)
.wait(1)
.to({ y: -14.05, alpha: 0.9474 }, 0)
.wait(1)
.to({ y: -15.6, alpha: 1 }, 0)
.wait(1)
.to({ y: -17.1, alpha: 0.95 }, 0)
.wait(1)
.to({ y: -18.65, alpha: 0.9 }, 0)
.wait(1)
.to({ y: -20.2, alpha: 0.85 }, 0)
.wait(1)
.to({ y: -21.7, alpha: 0.8 }, 0)
.wait(1)
.to({ y: -23.25, alpha: 0.75 }, 0)
.wait(1)
.to({ y: -24.8, alpha: 0.7 }, 0)
.wait(1)
.to({ y: -26.3, alpha: 0.65 }, 0)
.wait(1)
.to({ y: -27.85, alpha: 0.6 }, 0)
.wait(1)
.to({ y: -29.35, alpha: 0.55 }, 0)
.wait(1)
.to({ y: -30.9, alpha: 0.5 }, 0)
.wait(1)
.to({ y: -32.45, alpha: 0.45 }, 0)
.wait(1)
.to({ y: -33.95, alpha: 0.4 }, 0)
.wait(1)
.to({ y: -35.5, alpha: 0.35 }, 0)
.wait(1)
.to({ y: -37.05, alpha: 0.3 }, 0)
.wait(1)
.to({ y: -38.55, alpha: 0.25 }, 0)
.wait(1)
.to({ y: -40.1, alpha: 0.2 }, 0)
.wait(1)
.to({ y: -41.65, alpha: 0.15 }, 0)
.wait(1)
.to({ y: -43.15, alpha: 0.1 }, 0)
.wait(1)
.to({ y: -44.7, alpha: 0.05 }, 0)
.wait(1)
.to({ y: -46.25, alpha: 0 }, 0)
.wait(1)
.to({ y: 13.5 }, 0)
.wait(1)
.to({ y: 11.95, alpha: 0.0526 }, 0)
.wait(1)
.to({ y: 10.4, alpha: 0.1053 }, 0)
.wait(1)
.to({ y: 8.8, alpha: 0.1579 }, 0)
.wait(1)
.to({ y: 7.25, alpha: 0.2105 }, 0)
.wait(1)
.to({ y: 5.65, alpha: 0.2632 }, 0)
.wait(1)
.to({ y: 4.1, alpha: 0.3158 }, 0)
.wait(1)
.to({ y: 2.5, alpha: 0.3684 }, 0)
.wait(1)
.to({ y: 0.95, alpha: 0.4211 }, 0)
.wait(1)
.to({ y: -0.65, alpha: 0.4737 }, 0)
.wait(1)
.to({ y: -2.2, alpha: 0.5263 }, 0)
.wait(1)
.to({ y: -3.75, alpha: 0.5789 }, 0)
.wait(1)
.to({ y: -5.35, alpha: 0.6316 }, 0)
.wait(1)
.to({ y: -6.9, alpha: 0.6842 }, 0)
.wait(1)
.to({ y: -8.5, alpha: 0.7368 }, 0)
.wait(1)
.to({ y: -10.05, alpha: 0.7895 }, 0)
.wait(1)
.to({ y: -11.65, alpha: 0.8421 }, 0)
.wait(1)
.to({ y: -13.2, alpha: 0.8947 }, 0)
.wait(1)
.to({ y: -14.8, alpha: 0.9474 }, 0)
.wait(1)
.to({ y: -16.35, alpha: 1 }, 0)
.wait(1)
);
this._renderFirstFrame();
}).prototype = p = new cjs.MovieClip();
p.nominalBounds = new cjs.Rectangle(0, -59.7, 30.7, 86.6);
// stage content:
(lib._2 = function (mode, startPosition, loop, reversed) {
if (loop == null) {
loop = true;
}
if (reversed == null) {
reversed = false;
}
var props = new Object();
props.mode = mode;
props.startPosition = startPosition;
props.labels = {};
props.loop = loop;
props.reversed = reversed;
cjs.MovieClip.apply(this, [props]);
// arrows_down
this.instance = new lib.arrows_fly_mc();
this.instance.setTransform(484.25, 305.3, 1, 1, 0, 0, 0, 15.3, 8.6);
this.instance_1 = new lib.arrows_fly_mc();
this.instance_1.setTransform(297.55, 356.25, 1, 1, 0, 0, 0, 15.3, 8.6);
this.instance_2 = new lib.arrows_fly_mc();
this.instance_2.setTransform(106.25, 407, 1, 1, 0, 0, 0, 15.3, 8.6);
this.instance_3 = new lib.arrows_fly_mc();
this.instance_3.setTransform(529.5, 369.3, 1, 1, 0, 0, 0, 15.3, 8.6);
this.instance_4 = new lib.arrows_fly_mc();
this.instance_4.setTransform(342.8, 420.25, 1, 1, 0, 0, 0, 15.3, 8.6);
this.instance_5 = new lib.arrows_fly_mc();
this.instance_5.setTransform(151.5, 471, 1, 1, 0, 0, 0, 15.3, 8.6);
this.instance_6 = new lib.arrows_fly_mc();
this.instance_6.setTransform(569.5, 434.3, 1, 1, 0, 0, 0, 15.3, 8.6);
this.instance_7 = new lib.arrows_fly_mc();
this.instance_7.setTransform(382.8, 485.25, 1, 1, 0, 0, 0, 15.3, 8.6);
this.instance_8 = new lib.arrows_fly_mc();
this.instance_8.setTransform(191.5, 536, 1, 1, 0, 0, 0, 15.3, 8.6);
this.timeline.addTween(
cjs.Tween.get({})
.to({
state: [
{ t: this.instance_8 },
{ t: this.instance_7 },
{ t: this.instance_6 },
{ t: this.instance_5 },
{ t: this.instance_4 },
{ t: this.instance_3 },
{ t: this.instance_2 },
{ t: this.instance_1 },
{ t: this.instance },
],
})
.wait(1)
);
this._renderFirstFrame();
}).prototype = p = new lib.AnMovieClip();
p.nominalBounds = new cjs.Rectangle(431, 606.9, 153.89999999999998, -52.60000000000002);
// library properties:
lib.properties = {
id: 'D4460288217B4A1698F41885D25C9E28',
width: 680,
height: 680,
fps: 24,
color: '#FFFFFF',
opacity: 0.0,
manifest: [],
preloads: [],
};
// bootstrap callback support:
(lib.Stage = function (canvas) {
createjs.Stage.call(this, canvas);
}).prototype = p = new createjs.Stage();
p.setAutoPlay = function (autoPlay) {
this.tickEnabled = autoPlay;
};
p.play = function () {
this.tickEnabled = true;
this.getChildAt(0).gotoAndPlay(this.getTimelinePosition());
};
p.stop = function (ms) {
if (ms) this.seek(ms);
this.tickEnabled = false;
};
p.seek = function (ms) {
this.tickEnabled = true;
this.getChildAt(0).gotoAndStop((lib.properties.fps * ms) / 1000);
};
p.getDuration = function () {
return (this.getChildAt(0).totalFrames / lib.properties.fps) * 1000;
};
p.getTimelinePosition = function () {
return (this.getChildAt(0).currentFrame / lib.properties.fps) * 1000;
};
an.bootcompsLoaded = an.bootcompsLoaded || [];
if (!an.bootstrapListeners) {
an.bootstrapListeners = [];
}
an.bootstrapCallback = function (fnCallback) {
an.bootstrapListeners.push(fnCallback);
if (an.bootcompsLoaded.length > 0) {
for (var i = 0; i < an.bootcompsLoaded.length; ++i) {
fnCallback(an.bootcompsLoaded[i]);
}
}
};
an.compositions = an.compositions || {};
an.compositions['D4460288217B4A1698F41885D25C9E28'] = {
getStage: function () {
return exportRoot.stage;
},
getLibrary: function () {
return lib;
},
getSpriteSheet: function () {
return ss;
},
getImages: function () {
return img;
},
};
an.compositionLoaded = function (id) {
an.bootcompsLoaded.push(id);
for (var j = 0; j < an.bootstrapListeners.length; j++) {
an.bootstrapListeners[j](id);
}
};
an.getComposition = function (id) {
return an.compositions[id];
};
an.makeResponsive = function (isResp, respDim, isScale, scaleType, domContainers) {
var lastW,
lastH,
lastS = 1;
window.addEventListener('resize', resizeCanvas);
resizeCanvas();
function resizeCanvas() {
var w = lib.properties.width,
h = lib.properties.height;
var iw = window.innerWidth,
ih = window.innerHeight;
var pRatio = window.devicePixelRatio || 1,
xRatio = iw / w,
yRatio = ih / h,
sRatio = 1;
if (isResp) {
if ((respDim == 'width' && lastW == iw) || (respDim == 'height' && lastH == ih)) {
sRatio = lastS;
} else if (!isScale) {
if (iw < w || ih < h) sRatio = Math.min(xRatio, yRatio);
} else if (scaleType == 1) {
sRatio = Math.min(xRatio, yRatio);
} else if (scaleType == 2) {
sRatio = Math.max(xRatio, yRatio);
}
}
domContainers[0].width = w * pRatio * sRatio;
domContainers[0].height = h * pRatio * sRatio;
domContainers.forEach(function (container) {
container.style.width = w * sRatio + 'px';
container.style.height = h * sRatio + 'px';
});
stage.scaleX = pRatio * sRatio;
stage.scaleY = pRatio * sRatio;
lastW = iw;
lastH = ih;
lastS = sRatio;
stage.tickOnUpdate = false;
stage.update();
stage.tickOnUpdate = true;
}
};
an.handleSoundStreamOnTick = function (event) {
if (!event.paused) {
var stageChild = stage.getChildAt(0);
if (!stageChild.paused || stageChild.ignorePause) {
stageChild.syncStreamSounds();
}
}
};
an.handleFilterCache = function (event) {
if (!event.paused) {
var target = event.target;
if (target) {
if (target.filterCacheList) {
for (var index = 0; index < target.filterCacheList.length; index++) {
var cacheInst = target.filterCacheList[index];
if (cacheInst.startFrame <= target.currentFrame && target.currentFrame <= cacheInst.endFrame) {
cacheInst.instance.cache(cacheInst.x, cacheInst.y, cacheInst.w, cacheInst.h);
}
}
}
}
}
};
}
let createjs, AdobeAn;
let canvas, stage, exportRoot, anim_container, dom_overlay_container, fnStartAnimation;
function init2() {
canvas = document.getElementById('block-work__canvas2');
anim_container = document.getElementById('block-work__animation_container2');
dom_overlay_container = document.getElementById('block-work__dom_overlay_container2');
var comp = AdobeAn.getComposition('D4460288217B4A1698F41885D25C9E28');
var lib = comp.getLibrary();
handleComplete2({}, comp);
}
function handleComplete2(evt, comp) {
//This function is always called, irrespective of the content. You can use the variable "stage" after it is created in token create_stage.
var lib = comp.getLibrary();
var ss = comp.getSpriteSheet();
exportRoot = new lib._2();
stage = new lib.Stage(canvas);
//Registers the "tick" event listener.
fnStartAnimation = function () {
stage.addChild(exportRoot);
createjs.Ticker.framerate = lib.properties.fps;
createjs.Ticker.addEventListener('tick', stage);
};
//Code to support hidpi screens and responsive scaling.
AdobeAn.makeResponsive(true, 'both', false, 1, [canvas, anim_container, dom_overlay_container]);
AdobeAn.compositionLoaded(lib.properties.id);
fnStartAnimation();
}
if (window.createjs || window.AdobeAn) {
anim2((createjs = window.createjs || {}), (AdobeAn = window.AdobeAn || {}));
init2();
}
}
if (blockEl4) {
function anim4(cjs, an) {
var p; // shortcut to reference prototypes
var lib = {};
var ss = {};
var img = {};
lib.ssMetadata = [];
(lib.AnMovieClip = function () {
this.actionFrames = [];
this.ignorePause = false;
this.gotoAndPlay = function (positionOrLabel) {
cjs.MovieClip.prototype.gotoAndPlay.call(this, positionOrLabel);
};
this.play = function () {
cjs.MovieClip.prototype.play.call(this);
};
this.gotoAndStop = function (positionOrLabel) {
cjs.MovieClip.prototype.gotoAndStop.call(this, positionOrLabel);
};
this.stop = function () {
cjs.MovieClip.prototype.stop.call(this);
};
}).prototype = p = new cjs.MovieClip();
// symbols:
(lib.red_line = function (mode, startPosition, loop, reversed) {
if (loop == null) {
loop = true;
}
if (reversed == null) {
reversed = false;
}
var props = new Object();
props.mode = mode;
props.startPosition = startPosition;
props.labels = {};
props.loop = loop;
props.reversed = reversed;
cjs.MovieClip.apply(this, [props]);
// Layer_1
this.shape = new cjs.Shape();
this.shape.graphics.f().s('rgba(230,35,52,0.078)').ss(5, 1, 1).p('EAAAgpfMAAABS/');
this.shape.setTransform(0, 265.575);
this.timeline.addTween(cjs.Tween.get(this.shape).wait(1));
this._renderFirstFrame();
}).prototype = p = new cjs.MovieClip();
p.nominalBounds = new cjs.Rectangle(-2.5, -2.5, 5, 536.2);
(lib.Tween7 = function (mode, startPosition, loop, reversed) {
if (loop == null) {
loop = true;
}
if (reversed == null) {
reversed = false;
}
var props = new Object();
props.mode = mode;
props.startPosition = startPosition;
props.labels = {};
props.loop = loop;
props.reversed = reversed;
cjs.MovieClip.apply(this, [props]);
// Layer_1
this.instance = new lib.red_line('synched', 0);
this.instance.setTransform(48.45, -136.65, 1, 1.74, -70.4996, 0, 0, 0.1, 265.6);
this.instance_1 = new lib.red_line('synched', 0);
this.instance_1.setTransform(45.1, -127.25, 1, 1.74, -70.4996, 0, 0, 0.1, 265.6);
this.instance_2 = new lib.red_line('synched', 0);
this.instance_2.setTransform(41.7, -117.85, 1, 1.74, -70.4996, 0, 0, 0.1, 265.6);
this.instance_3 = new lib.red_line('synched', 0);
this.instance_3.setTransform(51.8, -146.15, 1, 1.74, -70.4996, 0, 0, 0.1, 265.6);
this.instance_4 = new lib.red_line('synched', 0);
this.instance_4.setTransform(35.05, -99, 1, 1.74, -70.4996, 0, 0, 0.1, 265.6);
this.instance_5 = new lib.red_line('synched', 0);
this.instance_5.setTransform(31.75, -89.55, 1, 1.74, -70.4996, 0, 0, 0.1, 265.6);
this.instance_6 = new lib.red_line('synched', 0);
this.instance_6.setTransform(28.4, -80.15, 1, 1.74, -70.4996, 0, 0, 0.1, 265.6);
this.instance_7 = new lib.red_line('synched', 0);
this.instance_7.setTransform(38.4, -108.4, 1, 1.74, -70.4996, 0, 0, 0.1, 265.6);
this.instance_8 = new lib.red_line('synched', 0);
this.instance_8.setTransform(21.75, -61.3, 1, 1.74, -70.4996, 0, 0, 0.1, 265.6);
this.instance_9 = new lib.red_line('synched', 0);
this.instance_9.setTransform(18.4, -51.85, 1, 1.74, -70.4996, 0, 0, 0.1, 265.6);
this.instance_10 = new lib.red_line('synched', 0);
this.instance_10.setTransform(15.1, -42.4, 1, 1.74, -70.4996, 0, 0, 0.1, 265.6);
this.instance_11 = new lib.red_line('synched', 0);
this.instance_11.setTransform(25.05, -70.7, 1, 1.74, -70.4996, 0, 0, 0.1, 265.6);
this.instance_12 = new lib.red_line('synched', 0);
this.instance_12.setTransform(8.4, -23.55, 1, 1.74, -70.4996, 0, 0, 0.1, 265.6);
this.instance_13 = new lib.red_line('synched', 0);
this.instance_13.setTransform(5.05, -14.1, 1, 1.74, -70.4996, 0, 0, 0, 265.6);
this.instance_14 = new lib.red_line('synched', 0);
this.instance_14.setTransform(1.65, -4.7, 1, 1.74, -70.4996, 0, 0, 0, 265.6);
this.instance_15 = new lib.red_line('synched', 0);
this.instance_15.setTransform(101.85, -287.5, 1, 1.74, -70.4996, 0, 0, 0.1, 265.6);
this.instance_16 = new lib.red_line('synched', 0);
this.instance_16.setTransform(98.45, -278.1, 1, 1.74, -70.4996, 0, 0, 0.1, 265.6);
this.instance_17 = new lib.red_line('synched', 0);
this.instance_17.setTransform(95.15, -268.65, 1, 1.74, -70.4996, 0, 0, 0.1, 265.6);
this.instance_18 = new lib.red_line('synched', 0);
this.instance_18.setTransform(105.15, -296.95, 1, 1.74, -70.4996, 0, 0, 0.1, 265.6);
this.instance_19 = new lib.red_line('synched', 0);
this.instance_19.setTransform(88.5, -249.8, 1, 1.74, -70.4996, 0, 0, 0.1, 265.6);
this.instance_20 = new lib.red_line('synched', 0);
this.instance_20.setTransform(85.15, -240.4, 1, 1.74, -70.4996, 0, 0, 0.1, 265.6);
this.instance_21 = new lib.red_line('synched', 0);
this.instance_21.setTransform(81.8, -230.95, 1, 1.74, -70.4996, 0, 0, 0.1, 265.6);
this.instance_22 = new lib.red_line('synched', 0);
this.instance_22.setTransform(91.85, -259.25, 1, 1.74, -70.4996, 0, 0, 0.1, 265.6);
this.instance_23 = new lib.red_line('synched', 0);
this.instance_23.setTransform(75.1, -212.1, 1, 1.74, -70.4996, 0, 0, 0.1, 265.6);
this.instance_24 = new lib.red_line('synched', 0);
this.instance_24.setTransform(71.8, -202.65, 1, 1.74, -70.4996, 0, 0, 0.1, 265.6);
this.instance_25 = new lib.red_line('synched', 0);
this.instance_25.setTransform(68.45, -193.25, 1, 1.74, -70.4996, 0, 0, 0.1, 265.6);
this.instance_26 = new lib.red_line('synched', 0);
this.instance_26.setTransform(78.45, -221.5, 1, 1.74, -70.4996, 0, 0, 0.1, 265.6);
this.instance_27 = new lib.red_line('synched', 0);
this.instance_27.setTransform(61.8, -174.4, 1, 1.74, -70.4996, 0, 0, 0.1, 265.6);
this.instance_28 = new lib.red_line('synched', 0);
this.instance_28.setTransform(58.4, -165, 1, 1.74, -70.4996, 0, 0, 0.1, 265.6);
this.instance_29 = new lib.red_line('synched', 0);
this.instance_29.setTransform(55.1, -155.55, 1, 1.74, -70.4996, 0, 0, 0.1, 265.6);
this.instance_30 = new lib.red_line('synched', 0);
this.instance_30.setTransform(65.1, -183.85, 1, 1.74, -70.4996, 0, 0, 0.1, 265.6);
this.instance_31 = new lib.red_line('synched', 0);
this.instance_31.setTransform(11.75, -33, 1, 1.74, -70.4996, 0, 0, 0.1, 265.6);
this.instance_32 = new lib.red_line('synched', 0);
this.instance_32.setTransform(-58.4, 165, 1, 1.74, -70.4996, 0, 0, -0.1, 265.6);
this.instance_33 = new lib.red_line('synched', 0);
this.instance_33.setTransform(-61.8, 174.45, 1, 1.74, -70.4996, 0, 0, -0.1, 265.6);
this.instance_34 = new lib.red_line('synched', 0);
this.instance_34.setTransform(-65.1, 183.9, 1, 1.74, -70.4996, 0, 0, -0.1, 265.6);
this.instance_35 = new lib.red_line('synched', 0);
this.instance_35.setTransform(-55.1, 155.6, 1, 1.74, -70.4996, 0, 0, -0.1, 265.6);
this.instance_36 = new lib.red_line('synched', 0);
this.instance_36.setTransform(-71.75, 202.75, 1, 1.74, -70.4996, 0, 0, -0.1, 265.6);
this.instance_37 = new lib.red_line('synched', 0);
this.instance_37.setTransform(-75.15, 212.1, 1, 1.74, -70.4996, 0, 0, -0.1, 265.6);
this.instance_38 = new lib.red_line('synched', 0);
this.instance_38.setTransform(-78.5, 221.5, 1, 1.74, -70.4996, 0, 0, -0.1, 265.6);
this.instance_39 = new lib.red_line('synched', 0);
this.instance_39.setTransform(-68.45, 193.3, 1, 1.74, -70.4996, 0, 0, -0.1, 265.6);
this.instance_40 = new lib.red_line('synched', 0);
this.instance_40.setTransform(-85.15, 240.4, 1, 1.74, -70.4996, 0, 0, -0.1, 265.6);
this.instance_41 = new lib.red_line('synched', 0);
this.instance_41.setTransform(-88.5, 249.85, 1, 1.74, -70.4996, 0, 0, -0.1, 265.6);
this.instance_42 = new lib.red_line('synched', 0);
this.instance_42.setTransform(-91.85, 259.25, 1, 1.74, -70.4996, 0, 0, -0.1, 265.6);
this.instance_43 = new lib.red_line('synched', 0);
this.instance_43.setTransform(-81.8, 230.95, 1, 1.74, -70.4996, 0, 0, -0.1, 265.6);
this.instance_44 = new lib.red_line('synched', 0);
this.instance_44.setTransform(-98.45, 278.05, 1, 1.74, -70.4996, 0, 0, -0.1, 265.6);
this.instance_45 = new lib.red_line('synched', 0);
this.instance_45.setTransform(-101.8, 287.5, 1, 1.74, -70.4996, 0, 0, -0.1, 265.6);
this.instance_46 = new lib.red_line('synched', 0);
this.instance_46.setTransform(-105.1, 296.95, 1, 1.74, -70.4996, 0, 0, -0.1, 265.6);
this.instance_47 = new lib.red_line('synched', 0);
this.instance_47.setTransform(-5.05, 14.25, 1, 1.74, -70.4996, 0, 0, -0.1, 265.6);
this.instance_48 = new lib.red_line('synched', 0);
this.instance_48.setTransform(-8.35, 23.7, 1, 1.74, -70.4996, 0, 0, -0.1, 265.6);
this.instance_49 = new lib.red_line('synched', 0);
this.instance_49.setTransform(-11.65, 32.95, 1, 1.74, -70.4996, 0, 0, 0.1, 265.6);
this.instance_50 = new lib.red_line('synched', 0);
this.instance_50.setTransform(-1.65, 4.75, 1, 1.74, -70.4996, 0, 0, 0, 265.6);
this.instance_51 = new lib.red_line('synched', 0);
this.instance_51.setTransform(-18.35, 51.85, 1, 1.74, -70.4996, 0, 0, 0, 265.6);
this.instance_52 = new lib.red_line('synched', 0);
this.instance_52.setTransform(-21.7, 61.3, 1, 1.74, -70.4996, 0, 0, 0, 265.6);
this.instance_53 = new lib.red_line('synched', 0);
this.instance_53.setTransform(-25, 70.6, 1, 1.74, -70.4996, 0, 0, 0.1, 265.6);
this.instance_54 = new lib.red_line('synched', 0);
this.instance_54.setTransform(-14.95, 42.4, 1, 1.74, -70.4996, 0, 0, 0.1, 265.6);
this.instance_55 = new lib.red_line('synched', 0);
this.instance_55.setTransform(-31.75, 89.65, 1, 1.74, -70.4996, 0, 0, -0.1, 265.6);
this.instance_56 = new lib.red_line('synched', 0);
this.instance_56.setTransform(-35, 98.85, 1, 1.74, -70.4996, 0, 0, 0.1, 265.6);
this.instance_57 = new lib.red_line('synched', 0);
this.instance_57.setTransform(-38.45, 108.45, 1, 1.74, -70.4996, 0, 0, -0.1, 265.6);
this.instance_58 = new lib.red_line('synched', 0);
this.instance_58.setTransform(-28.35, 80, 1, 1.74, -70.4996, 0, 0, 0.1, 265.6);
this.instance_59 = new lib.red_line('synched', 0);
this.instance_59.setTransform(-45.1, 127.3, 1, 1.74, -70.4996, 0, 0, -0.1, 265.6);
this.instance_60 = new lib.red_line('synched', 0);
this.instance_60.setTransform(-48.4, 136.75, 1, 1.74, -70.4996, 0, 0, -0.1, 265.6);
this.instance_61 = new lib.red_line('synched', 0);
this.instance_61.setTransform(-51.7, 146, 1, 1.74, -70.4996, 0, 0, 0.1, 265.6);
this.instance_62 = new lib.red_line('synched', 0);
this.instance_62.setTransform(-41.7, 117.8, 1, 1.74, -70.4996, 0, 0, 0, 265.6);
this.instance_63 = new lib.red_line('synched', 0);
this.instance_63.setTransform(-95.1, 268.65, 1, 1.74, -70.4996, 0, 0, -0.1, 265.6);
this.timeline.addTween(
cjs.Tween.get({})
.to({
state: [
{ t: this.instance_63 },
{ t: this.instance_62 },
{ t: this.instance_61 },
{ t: this.instance_60 },
{ t: this.instance_59 },
{ t: this.instance_58 },
{ t: this.instance_57 },
{ t: this.instance_56 },
{ t: this.instance_55 },
{ t: this.instance_54 },
{ t: this.instance_53 },
{ t: this.instance_52 },
{ t: this.instance_51 },
{ t: this.instance_50 },
{ t: this.instance_49 },
{ t: this.instance_48 },
{ t: this.instance_47 },
{ t: this.instance_46 },
{ t: this.instance_45 },
{ t: this.instance_44 },
{ t: this.instance_43 },
{ t: this.instance_42 },
{ t: this.instance_41 },
{ t: this.instance_40 },
{ t: this.instance_39 },
{ t: this.instance_38 },
{ t: this.instance_37 },
{ t: this.instance_36 },
{ t: this.instance_35 },
{ t: this.instance_34 },
{ t: this.instance_33 },
{ t: this.instance_32 },
{ t: this.instance_31 },
{ t: this.instance_30 },
{ t: this.instance_29 },
{ t: this.instance_28 },
{ t: this.instance_27 },
{ t: this.instance_26 },
{ t: this.instance_25 },
{ t: this.instance_24 },
{ t: this.instance_23 },
{ t: this.instance_22 },
{ t: this.instance_21 },
{ t: this.instance_20 },
{ t: this.instance_19 },
{ t: this.instance_18 },
{ t: this.instance_17 },
{ t: this.instance_16 },
{ t: this.instance_15 },
{ t: this.instance_14 },
{ t: this.instance_13 },
{ t: this.instance_12 },
{ t: this.instance_11 },
{ t: this.instance_10 },
{ t: this.instance_9 },
{ t: this.instance_8 },
{ t: this.instance_7 },
{ t: this.instance_6 },
{ t: this.instance_5 },
{ t: this.instance_4 },
{ t: this.instance_3 },
{ t: this.instance_2 },
{ t: this.instance_1 },
{ t: this.instance },
],
})
.wait(1)
);
this._renderFirstFrame();
}).prototype = p = new cjs.MovieClip();
p.nominalBounds = new cjs.Rectangle(-544.1, -454.6, 1088.3000000000002, 909.2);
(lib.Tween6 = function (mode, startPosition, loop, reversed) {
if (loop == null) {
loop = true;
}
if (reversed == null) {
reversed = false;
}
var props = new Object();
props.mode = mode;
props.startPosition = startPosition;
props.labels = {};
props.loop = loop;
props.reversed = reversed;
cjs.MovieClip.apply(this, [props]);
// Layer_1
this.instance = new lib.red_line('synched', 0);
this.instance.setTransform(48.45, -136.65, 1, 1.74, -70.4996, 0, 0, 0.1, 265.6);
this.instance_1 = new lib.red_line('synched', 0);
this.instance_1.setTransform(45.1, -127.25, 1, 1.74, -70.4996, 0, 0, 0.1, 265.6);
this.instance_2 = new lib.red_line('synched', 0);
this.instance_2.setTransform(41.7, -117.85, 1, 1.74, -70.4996, 0, 0, 0.1, 265.6);
this.instance_3 = new lib.red_line('synched', 0);
this.instance_3.setTransform(51.8, -146.15, 1, 1.74, -70.4996, 0, 0, 0.1, 265.6);
this.instance_4 = new lib.red_line('synched', 0);
this.instance_4.setTransform(35.05, -99, 1, 1.74, -70.4996, 0, 0, 0.1, 265.6);
this.instance_5 = new lib.red_line('synched', 0);
this.instance_5.setTransform(31.75, -89.55, 1, 1.74, -70.4996, 0, 0, 0.1, 265.6);
this.instance_6 = new lib.red_line('synched', 0);
this.instance_6.setTransform(28.4, -80.15, 1, 1.74, -70.4996, 0, 0, 0.1, 265.6);
this.instance_7 = new lib.red_line('synched', 0);
this.instance_7.setTransform(38.4, -108.4, 1, 1.74, -70.4996, 0, 0, 0.1, 265.6);
this.instance_8 = new lib.red_line('synched', 0);
this.instance_8.setTransform(21.75, -61.3, 1, 1.74, -70.4996, 0, 0, 0.1, 265.6);
this.instance_9 = new lib.red_line('synched', 0);
this.instance_9.setTransform(18.4, -51.85, 1, 1.74, -70.4996, 0, 0, 0.1, 265.6);
this.instance_10 = new lib.red_line('synched', 0);
this.instance_10.setTransform(15.1, -42.4, 1, 1.74, -70.4996, 0, 0, 0.1, 265.6);
this.instance_11 = new lib.red_line('synched', 0);
this.instance_11.setTransform(25.05, -70.7, 1, 1.74, -70.4996, 0, 0, 0.1, 265.6);
this.instance_12 = new lib.red_line('synched', 0);
this.instance_12.setTransform(8.4, -23.55, 1, 1.74, -70.4996, 0, 0, 0.1, 265.6);
this.instance_13 = new lib.red_line('synched', 0);
this.instance_13.setTransform(5.05, -14.1, 1, 1.74, -70.4996, 0, 0, 0, 265.6);
this.instance_14 = new lib.red_line('synched', 0);
this.instance_14.setTransform(1.65, -4.7, 1, 1.74, -70.4996, 0, 0, 0, 265.6);
this.instance_15 = new lib.red_line('synched', 0);
this.instance_15.setTransform(101.85, -287.5, 1, 1.74, -70.4996, 0, 0, 0.1, 265.6);
this.instance_16 = new lib.red_line('synched', 0);
this.instance_16.setTransform(98.45, -278.1, 1, 1.74, -70.4996, 0, 0, 0.1, 265.6);
this.instance_17 = new lib.red_line('synched', 0);
this.instance_17.setTransform(95.15, -268.65, 1, 1.74, -70.4996, 0, 0, 0.1, 265.6);
this.instance_18 = new lib.red_line('synched', 0);
this.instance_18.setTransform(105.15, -296.95, 1, 1.74, -70.4996, 0, 0, 0.1, 265.6);
this.instance_19 = new lib.red_line('synched', 0);
this.instance_19.setTransform(88.5, -249.8, 1, 1.74, -70.4996, 0, 0, 0.1, 265.6);
this.instance_20 = new lib.red_line('synched', 0);
this.instance_20.setTransform(85.15, -240.4, 1, 1.74, -70.4996, 0, 0, 0.1, 265.6);
this.instance_21 = new lib.red_line('synched', 0);
this.instance_21.setTransform(81.8, -230.95, 1, 1.74, -70.4996, 0, 0, 0.1, 265.6);
this.instance_22 = new lib.red_line('synched', 0);
this.instance_22.setTransform(91.85, -259.25, 1, 1.74, -70.4996, 0, 0, 0.1, 265.6);
this.instance_23 = new lib.red_line('synched', 0);
this.instance_23.setTransform(75.1, -212.1, 1, 1.74, -70.4996, 0, 0, 0.1, 265.6);
this.instance_24 = new lib.red_line('synched', 0);
this.instance_24.setTransform(71.8, -202.65, 1, 1.74, -70.4996, 0, 0, 0.1, 265.6);
this.instance_25 = new lib.red_line('synched', 0);
this.instance_25.setTransform(68.45, -193.25, 1, 1.74, -70.4996, 0, 0, 0.1, 265.6);
this.instance_26 = new lib.red_line('synched', 0);
this.instance_26.setTransform(78.45, -221.5, 1, 1.74, -70.4996, 0, 0, 0.1, 265.6);
this.instance_27 = new lib.red_line('synched', 0);
this.instance_27.setTransform(61.8, -174.4, 1, 1.74, -70.4996, 0, 0, 0.1, 265.6);
this.instance_28 = new lib.red_line('synched', 0);
this.instance_28.setTransform(58.4, -165, 1, 1.74, -70.4996, 0, 0, 0.1, 265.6);
this.instance_29 = new lib.red_line('synched', 0);
this.instance_29.setTransform(55.1, -155.55, 1, 1.74, -70.4996, 0, 0, 0.1, 265.6);
this.instance_30 = new lib.red_line('synched', 0);
this.instance_30.setTransform(65.1, -183.85, 1, 1.74, -70.4996, 0, 0, 0.1, 265.6);
this.instance_31 = new lib.red_line('synched', 0);
this.instance_31.setTransform(11.75, -33, 1, 1.74, -70.4996, 0, 0, 0.1, 265.6);
this.instance_32 = new lib.red_line('synched', 0);
this.instance_32.setTransform(-58.4, 165, 1, 1.74, -70.4996, 0, 0, -0.1, 265.6);
this.instance_33 = new lib.red_line('synched', 0);
this.instance_33.setTransform(-61.8, 174.45, 1, 1.74, -70.4996, 0, 0, -0.1, 265.6);
this.instance_34 = new lib.red_line('synched', 0);
this.instance_34.setTransform(-65.1, 183.9, 1, 1.74, -70.4996, 0, 0, -0.1, 265.6);
this.instance_35 = new lib.red_line('synched', 0);
this.instance_35.setTransform(-55.1, 155.6, 1, 1.74, -70.4996, 0, 0, -0.1, 265.6);
this.instance_36 = new lib.red_line('synched', 0);
this.instance_36.setTransform(-71.75, 202.75, 1, 1.74, -70.4996, 0, 0, -0.1, 265.6);
this.instance_37 = new lib.red_line('synched', 0);
this.instance_37.setTransform(-75.15, 212.1, 1, 1.74, -70.4996, 0, 0, -0.1, 265.6);
this.instance_38 = new lib.red_line('synched', 0);
this.instance_38.setTransform(-78.5, 221.5, 1, 1.74, -70.4996, 0, 0, -0.1, 265.6);
this.instance_39 = new lib.red_line('synched', 0);
this.instance_39.setTransform(-68.45, 193.3, 1, 1.74, -70.4996, 0, 0, -0.1, 265.6);
this.instance_40 = new lib.red_line('synched', 0);
this.instance_40.setTransform(-85.15, 240.4, 1, 1.74, -70.4996, 0, 0, -0.1, 265.6);
this.instance_41 = new lib.red_line('synched', 0);
this.instance_41.setTransform(-88.5, 249.85, 1, 1.74, -70.4996, 0, 0, -0.1, 265.6);
this.instance_42 = new lib.red_line('synched', 0);
this.instance_42.setTransform(-91.85, 259.25, 1, 1.74, -70.4996, 0, 0, -0.1, 265.6);
this.instance_43 = new lib.red_line('synched', 0);
this.instance_43.setTransform(-81.8, 230.95, 1, 1.74, -70.4996, 0, 0, -0.1, 265.6);
this.instance_44 = new lib.red_line('synched', 0);
this.instance_44.setTransform(-98.45, 278.05, 1, 1.74, -70.4996, 0, 0, -0.1, 265.6);
this.instance_45 = new lib.red_line('synched', 0);
this.instance_45.setTransform(-101.8, 287.5, 1, 1.74, -70.4996, 0, 0, -0.1, 265.6);
this.instance_46 = new lib.red_line('synched', 0);
this.instance_46.setTransform(-105.1, 296.95, 1, 1.74, -70.4996, 0, 0, -0.1, 265.6);
this.instance_47 = new lib.red_line('synched', 0);
this.instance_47.setTransform(-5.05, 14.25, 1, 1.74, -70.4996, 0, 0, -0.1, 265.6);
this.instance_48 = new lib.red_line('synched', 0);
this.instance_48.setTransform(-8.35, 23.7, 1, 1.74, -70.4996, 0, 0, -0.1, 265.6);
this.instance_49 = new lib.red_line('synched', 0);
this.instance_49.setTransform(-11.65, 32.95, 1, 1.74, -70.4996, 0, 0, 0.1, 265.6);
this.instance_50 = new lib.red_line('synched', 0);
this.instance_50.setTransform(-1.65, 4.75, 1, 1.74, -70.4996, 0, 0, 0, 265.6);
this.instance_51 = new lib.red_line('synched', 0);
this.instance_51.setTransform(-18.35, 51.85, 1, 1.74, -70.4996, 0, 0, 0, 265.6);
this.instance_52 = new lib.red_line('synched', 0);
this.instance_52.setTransform(-21.7, 61.3, 1, 1.74, -70.4996, 0, 0, 0, 265.6);
this.instance_53 = new lib.red_line('synched', 0);
this.instance_53.setTransform(-25, 70.6, 1, 1.74, -70.4996, 0, 0, 0.1, 265.6);
this.instance_54 = new lib.red_line('synched', 0);
this.instance_54.setTransform(-14.95, 42.4, 1, 1.74, -70.4996, 0, 0, 0.1, 265.6);
this.instance_55 = new lib.red_line('synched', 0);
this.instance_55.setTransform(-31.75, 89.65, 1, 1.74, -70.4996, 0, 0, -0.1, 265.6);
this.instance_56 = new lib.red_line('synched', 0);
this.instance_56.setTransform(-35, 98.85, 1, 1.74, -70.4996, 0, 0, 0.1, 265.6);
this.instance_57 = new lib.red_line('synched', 0);
this.instance_57.setTransform(-38.45, 108.45, 1, 1.74, -70.4996, 0, 0, -0.1, 265.6);
this.instance_58 = new lib.red_line('synched', 0);
this.instance_58.setTransform(-28.35, 80, 1, 1.74, -70.4996, 0, 0, 0.1, 265.6);
this.instance_59 = new lib.red_line('synched', 0);
this.instance_59.setTransform(-45.1, 127.3, 1, 1.74, -70.4996, 0, 0, -0.1, 265.6);
this.instance_60 = new lib.red_line('synched', 0);
this.instance_60.setTransform(-48.4, 136.75, 1, 1.74, -70.4996, 0, 0, -0.1, 265.6);
this.instance_61 = new lib.red_line('synched', 0);
this.instance_61.setTransform(-51.7, 146, 1, 1.74, -70.4996, 0, 0, 0.1, 265.6);
this.instance_62 = new lib.red_line('synched', 0);
this.instance_62.setTransform(-41.7, 117.8, 1, 1.74, -70.4996, 0, 0, 0, 265.6);
this.instance_63 = new lib.red_line('synched', 0);
this.instance_63.setTransform(-95.1, 268.65, 1, 1.74, -70.4996, 0, 0, -0.1, 265.6);
this.timeline.addTween(
cjs.Tween.get({})
.to({
state: [
{ t: this.instance_63 },
{ t: this.instance_62 },
{ t: this.instance_61 },
{ t: this.instance_60 },
{ t: this.instance_59 },
{ t: this.instance_58 },
{ t: this.instance_57 },
{ t: this.instance_56 },
{ t: this.instance_55 },
{ t: this.instance_54 },
{ t: this.instance_53 },
{ t: this.instance_52 },
{ t: this.instance_51 },
{ t: this.instance_50 },
{ t: this.instance_49 },
{ t: this.instance_48 },
{ t: this.instance_47 },
{ t: this.instance_46 },
{ t: this.instance_45 },
{ t: this.instance_44 },
{ t: this.instance_43 },
{ t: this.instance_42 },
{ t: this.instance_41 },
{ t: this.instance_40 },
{ t: this.instance_39 },
{ t: this.instance_38 },
{ t: this.instance_37 },
{ t: this.instance_36 },
{ t: this.instance_35 },
{ t: this.instance_34 },
{ t: this.instance_33 },
{ t: this.instance_32 },
{ t: this.instance_31 },
{ t: this.instance_30 },
{ t: this.instance_29 },
{ t: this.instance_28 },
{ t: this.instance_27 },
{ t: this.instance_26 },
{ t: this.instance_25 },
{ t: this.instance_24 },
{ t: this.instance_23 },
{ t: this.instance_22 },
{ t: this.instance_21 },
{ t: this.instance_20 },
{ t: this.instance_19 },
{ t: this.instance_18 },
{ t: this.instance_17 },
{ t: this.instance_16 },
{ t: this.instance_15 },
{ t: this.instance_14 },
{ t: this.instance_13 },
{ t: this.instance_12 },
{ t: this.instance_11 },
{ t: this.instance_10 },
{ t: this.instance_9 },
{ t: this.instance_8 },
{ t: this.instance_7 },
{ t: this.instance_6 },
{ t: this.instance_5 },
{ t: this.instance_4 },
{ t: this.instance_3 },
{ t: this.instance_2 },
{ t: this.instance_1 },
{ t: this.instance },
],
})
.wait(1)
);
this._renderFirstFrame();
}).prototype = p = new cjs.MovieClip();
p.nominalBounds = new cjs.Rectangle(-544.1, -454.6, 1088.3000000000002, 909.2);
(lib.saas_mc = function (mode, startPosition, loop, reversed) {
if (loop == null) {
loop = true;
}
if (reversed == null) {
reversed = false;
}
var props = new Object();
props.mode = mode;
props.startPosition = startPosition;
props.labels = {};
props.loop = loop;
props.reversed = reversed;
cjs.MovieClip.apply(this, [props]);
// FlashAICB (mask)
var mask = new cjs.Shape();
mask._off = true;
mask.graphics.p(
'Egh4AZgQgogEgdgUQgbgUgVgmInitgInjteQgagvAOggQANggA0gPQA0gPCogqMBNOgTwQAkgKATACQBNgDArBAQFzIvLkRSQAZAmgLAhQgMAhgtANIh4AiIh5AgMhPDAU/IgmAJQgPACgNAAIgKAAg'
);
mask.setTransform(343.198, 89.1801);
// Layer_2
this.instance = new lib.Tween6('synched', 0);
this.instance.setTransform(415.2, 171.65);
this.instance_1 = new lib.Tween7('synched', 0);
this.instance_1.setTransform(415.2, 161.65);
var maskedShapeInstanceList = [this.instance, this.instance_1];
for (var shapedInstanceItr = 0; shapedInstanceItr < maskedShapeInstanceList.length; shapedInstanceItr++) {
maskedShapeInstanceList[shapedInstanceItr].mask = mask;
}
this.timeline.addTween(
cjs.Tween.get({})
.to({ state: [{ t: this.instance }] })
.to({ state: [{ t: this.instance_1 }] }, 14)
.wait(1)
);
this.timeline.addTween(cjs.Tween.get(this.instance).to({ _off: true, y: 161.65 }, 14).wait(1));
this._renderFirstFrame();
}).prototype = p = new cjs.MovieClip();
p.nominalBounds = new cjs.Rectangle(16.4, -74, 653.6, 326.4);
// stage content:
(lib._4 = function (mode, startPosition, loop, reversed) {
if (loop == null) {
loop = true;
}
if (reversed == null) {
reversed = false;
}
var props = new Object();
props.mode = mode;
props.startPosition = startPosition;
props.labels = {};
props.loop = loop;
props.reversed = reversed;
cjs.MovieClip.apply(this, [props]);
// SaaS
this.instance = new lib.saas_mc();
this.instance.setTransform(339.9, 375.35, 1, 1, 0, 0, 0, 339.9, 132.7);
this.instance.alpha = 0.9297;
this.timeline.addTween(cjs.Tween.get(this.instance).wait(1));
this._renderFirstFrame();
}).prototype = p = new lib.AnMovieClip();
p.nominalBounds = new cjs.Rectangle(209.6, 299.4, 751.1999999999999, 569.8000000000001);
// library properties:
lib.properties = {
id: 'D4460288217B4A1698F41885D25C9E28',
width: 680,
height: 680,
fps: 24,
color: '#FFFFFF',
opacity: 0.0,
manifest: [],
preloads: [],
};
// bootstrap callback support:
(lib.Stage = function (canvas) {
createjs.Stage.call(this, canvas);
}).prototype = p = new createjs.Stage();
p.setAutoPlay = function (autoPlay) {
this.tickEnabled = autoPlay;
};
p.play = function () {
this.tickEnabled = true;
this.getChildAt(0).gotoAndPlay(this.getTimelinePosition());
};
p.stop = function (ms) {
if (ms) this.seek(ms);
this.tickEnabled = false;
};
p.seek = function (ms) {
this.tickEnabled = true;
this.getChildAt(0).gotoAndStop((lib.properties.fps * ms) / 1000);
};
p.getDuration = function () {
return (this.getChildAt(0).totalFrames / lib.properties.fps) * 1000;
};
p.getTimelinePosition = function () {
return (this.getChildAt(0).currentFrame / lib.properties.fps) * 1000;
};
an.bootcompsLoaded = an.bootcompsLoaded || [];
if (!an.bootstrapListeners) {
an.bootstrapListeners = [];
}
an.bootstrapCallback = function (fnCallback) {
an.bootstrapListeners.push(fnCallback);
if (an.bootcompsLoaded.length > 0) {
for (var i = 0; i < an.bootcompsLoaded.length; ++i) {
fnCallback(an.bootcompsLoaded[i]);
}
}
};
an.compositions = an.compositions || {};
an.compositions['D4460288217B4A1698F41885D25C9E28'] = {
getStage: function () {
return exportRoot.stage;
},
getLibrary: function () {
return lib;
},
getSpriteSheet: function () {
return ss;
},
getImages: function () {
return img;
},
};
an.compositionLoaded = function (id) {
an.bootcompsLoaded.push(id);
for (var j = 0; j < an.bootstrapListeners.length; j++) {
an.bootstrapListeners[j](id);
}
};
an.getComposition = function (id) {
return an.compositions[id];
};
an.makeResponsive = function (isResp, respDim, isScale, scaleType, domContainers) {
var lastW,
lastH,
lastS = 1;
window.addEventListener('resize', resizeCanvas);
resizeCanvas();
function resizeCanvas() {
var w = lib.properties.width,
h = lib.properties.height;
var iw = window.innerWidth,
ih = window.innerHeight;
var pRatio = window.devicePixelRatio || 1,
xRatio = iw / w,
yRatio = ih / h,
sRatio = 1;
if (isResp) {
if ((respDim == 'width' && lastW == iw) || (respDim == 'height' && lastH == ih)) {
sRatio = lastS;
} else if (!isScale) {
if (iw < w || ih < h) sRatio = Math.min(xRatio, yRatio);
} else if (scaleType == 1) {
sRatio = Math.min(xRatio, yRatio);
} else if (scaleType == 2) {
sRatio = Math.max(xRatio, yRatio);
}
}
domContainers[0].width = w * pRatio * sRatio;
domContainers[0].height = h * pRatio * sRatio;
domContainers.forEach(function (container) {
container.style.width = w * sRatio + 'px';
container.style.height = h * sRatio + 'px';
});
stage.scaleX = pRatio * sRatio;
stage.scaleY = pRatio * sRatio;
lastW = iw;
lastH = ih;
lastS = sRatio;
stage.tickOnUpdate = false;
stage.update();
stage.tickOnUpdate = true;
}
};
an.handleSoundStreamOnTick = function (event) {
if (!event.paused) {
var stageChild = stage.getChildAt(0);
if (!stageChild.paused || stageChild.ignorePause) {
stageChild.syncStreamSounds();
}
}
};
an.handleFilterCache = function (event) {
if (!event.paused) {
var target = event.target;
if (target) {
if (target.filterCacheList) {
for (var index = 0; index < target.filterCacheList.length; index++) {
var cacheInst = target.filterCacheList[index];
if (cacheInst.startFrame <= target.currentFrame && target.currentFrame <= cacheInst.endFrame) {
cacheInst.instance.cache(cacheInst.x, cacheInst.y, cacheInst.w, cacheInst.h);
}
}
}
}
}
};
}
let createjs, AdobeAn;
let canvas, stage, exportRoot, anim_container, dom_overlay_container, fnStartAnimation;
function init4() {
canvas = document.getElementById('block-work__canvas4');
anim_container = document.getElementById('block-work__animation_container4');
dom_overlay_container = document.getElementById('block-work__dom_overlay_container4');
var comp = AdobeAn.getComposition('D4460288217B4A1698F41885D25C9E28');
var lib = comp.getLibrary();
handleComplete4({}, comp);
}
function handleComplete4(evt, comp) {
//This function is always called, irrespective of the content. You can use the variable "stage" after it is created in token create_stage.
var lib = comp.getLibrary();
var ss = comp.getSpriteSheet();
exportRoot = new lib._4();
stage = new lib.Stage(canvas);
//Registers the "tick" event listener.
fnStartAnimation = function () {
stage.addChild(exportRoot);
createjs.Ticker.framerate = lib.properties.fps;
createjs.Ticker.addEventListener('tick', stage);
};
//Code to support hidpi screens and responsive scaling.
AdobeAn.makeResponsive(true, 'both', false, 1, [canvas, anim_container, dom_overlay_container]);
AdobeAn.compositionLoaded(lib.properties.id);
fnStartAnimation();
}
if (window.createjs || window.AdobeAn) {
anim4((createjs = window.createjs || {}), (AdobeAn = window.AdobeAn || {}));
init4();
}
}
if (blockEl6) {
function anim6(cjs, an) {
var p; // shortcut to reference prototypes
var lib = {};
var ss = {};
var img = {};
lib.ssMetadata = [];
(lib.AnMovieClip = function () {
this.actionFrames = [];
this.ignorePause = false;
this.gotoAndPlay = function (positionOrLabel) {
cjs.MovieClip.prototype.gotoAndPlay.call(this, positionOrLabel);
};
this.play = function () {
cjs.MovieClip.prototype.play.call(this);
};
this.gotoAndStop = function (positionOrLabel) {
cjs.MovieClip.prototype.gotoAndStop.call(this, positionOrLabel);
};
this.stop = function () {
cjs.MovieClip.prototype.stop.call(this);
};
}).prototype = p = new cjs.MovieClip();
// symbols:
// helper functions:
function mc_symbol_clone() {
var clone = this._cloneProps(new this.constructor(this.mode, this.startPosition, this.loop, this.reversed));
clone.gotoAndStop(this.currentFrame);
clone.paused = this.paused;
clone.framerate = this.framerate;
return clone;
}
function getMCSymbolPrototype(symbol, nominalBounds, frameBounds) {
var prototype = cjs.extend(symbol, cjs.MovieClip);
prototype.clone = mc_symbol_clone;
prototype.nominalBounds = nominalBounds;
prototype.frameBounds = frameBounds;
return prototype;
}
(lib.Symbol4 = function (mode, startPosition, loop, reversed) {
if (loop == null) {
loop = true;
}
if (reversed == null) {
reversed = false;
}
var props = new Object();
props.mode = mode;
props.startPosition = startPosition;
props.labels = {};
props.loop = loop;
props.reversed = reversed;
cjs.MovieClip.apply(this, [props]);
// Layer_1
this.shape = new cjs.Shape();
this.shape.graphics.f('#9BA4AD').s().p('AhHgIICPiBIAACSIiPCBg');
this.shape.setTransform(23.325, 13.775);
this.shape_1 = new cjs.Shape();
this.shape_1.graphics.f('#CAD1D8').s().p('AhQAeIAAiSIChBXIAACSg');
this.shape_1.setTransform(8.05, 15.85);
this.timeline.addTween(
cjs.Tween.get({})
.to({ state: [{ t: this.shape_1 }, { t: this.shape }] })
.wait(1)
);
this._renderFirstFrame();
}).prototype = getMCSymbolPrototype(lib.Symbol4, new cjs.Rectangle(0, 0, 30.6, 27.6), null);
(lib.Path_1 = function (mode, startPosition, loop, reversed) {
if (loop == null) {
loop = true;
}
if (reversed == null) {
reversed = false;
}
var props = new Object();
props.mode = mode;
props.startPosition = startPosition;
props.labels = {};
props.loop = loop;
props.reversed = reversed;
cjs.MovieClip.apply(this, [props]);
// Layer_1
this.shape = new cjs.Shape();
this.shape.graphics.f('#E62334').s().p('AhwgTIDgjDIAADqIjgDDg');
this.shape.setTransform(11.55, 21.45);
this.timeline.addTween(cjs.Tween.get(this.shape).wait(1));
this._renderFirstFrame();
}).prototype = getMCSymbolPrototype(lib.Path_1, new cjs.Rectangle(0.3, 0, 22.5, 42.9), null);
(lib.Path = function (mode, startPosition, loop, reversed) {
if (loop == null) {
loop = true;
}
if (reversed == null) {
reversed = false;
}
var props = new Object();
props.mode = mode;
props.startPosition = startPosition;
props.labels = {};
props.loop = loop;
props.reversed = reversed;
cjs.MovieClip.apply(this, [props]);
// Layer_1
this.shape = new cjs.Shape();
this.shape.graphics.f('#E62334').s().p('AiDA3IAAjqIEHB9IAADqg');
this.shape.setTransform(13.2, 17.975);
this.timeline.addTween(cjs.Tween.get(this.shape).wait(1));
this._renderFirstFrame();
}).prototype = getMCSymbolPrototype(lib.Path, new cjs.Rectangle(0, 0, 26.4, 36), null);
(lib.Symbol2 = function (mode, startPosition, loop, reversed) {
if (loop == null) {
loop = true;
}
if (reversed == null) {
reversed = false;
}
var props = new Object();
props.mode = mode;
props.startPosition = startPosition;
props.labels = {};
props.loop = loop;
props.reversed = reversed;
cjs.MovieClip.apply(this, [props]);
// Layer_1
this.instance = new lib.Path();
this.instance.setTransform(22.4, 11.2, 0.627, 0.627, 0, 0, 0, 13.2, 17.9);
this.instance.alpha = 0.3008;
this.instance_1 = new lib.Path_1();
this.instance_1.setTransform(6.95, 13.75, 0.627, 0.627, 0, 0, 0, 11.4, 21.9);
this.instance_1.alpha = 0.1992;
this.timeline.addTween(
cjs.Tween.get({})
.to({ state: [{ t: this.instance_1 }, { t: this.instance }] })
.wait(1)
);
this._renderFirstFrame();
}).prototype = getMCSymbolPrototype(lib.Symbol2, new cjs.Rectangle(0, 0, 30.7, 26.9), null);
(lib.arrows_fly_mc = function (mode, startPosition, loop, reversed) {
if (loop == null) {
loop = true;
}
if (reversed == null) {
reversed = false;
}
var props = new Object();
props.mode = mode;
props.startPosition = startPosition;
props.labels = {};
props.loop = loop;
props.reversed = reversed;
cjs.MovieClip.apply(this, [props]);
// Symbol_2_copy
this.instance = new lib.Symbol2();
this.instance.setTransform(15.3, -16.35, 1, 1, 0, 0, 0, 15.3, 13.5);
this.timeline.addTween(
cjs.Tween.get(this.instance)
.wait(1)
.to({ y: -18, alpha: 0.9444 }, 0)
.wait(1)
.to({ y: -19.65, alpha: 0.8889 }, 0)
.wait(1)
.to({ y: -21.3, alpha: 0.8333 }, 0)
.wait(1)
.to({ y: -22.95, alpha: 0.7778 }, 0)
.wait(1)
.to({ y: -24.6, alpha: 0.7222 }, 0)
.wait(1)
.to({ y: -26.3, alpha: 0.6667 }, 0)
.wait(1)
.to({ y: -27.95, alpha: 0.6111 }, 0)
.wait(1)
.to({ y: -29.6, alpha: 0.5556 }, 0)
.wait(1)
.to({ y: -31.25, alpha: 0.5 }, 0)
.wait(1)
.to({ y: -32.9, alpha: 0.4444 }, 0)
.wait(1)
.to({ y: -34.6, alpha: 0.3889 }, 0)
.wait(1)
.to({ y: -36.25, alpha: 0.3333 }, 0)
.wait(1)
.to({ y: -37.9, alpha: 0.2778 }, 0)
.wait(1)
.to({ y: -39.55, alpha: 0.2222 }, 0)
.wait(1)
.to({ y: -41.2, alpha: 0.1667 }, 0)
.wait(1)
.to({ y: -42.9, alpha: 0.1111 }, 0)
.wait(1)
.to({ y: -44.55, alpha: 0.0556 }, 0)
.wait(1)
.to({ y: -46.2, alpha: 0 }, 0)
.to({ _off: true }, 1)
.wait(41)
);
// Symbol_2
this.instance_1 = new lib.Symbol2();
this.instance_1.setTransform(15.3, 13.5, 1, 1, 0, 0, 0, 15.3, 13.5);
this.instance_1.alpha = 0;
this.instance_1._off = true;
this.timeline.addTween(
cjs.Tween.get(this.instance_1)
.wait(19)
.to({ _off: false }, 0)
.wait(1)
.to({ y: 12.05, alpha: 0.05 }, 0)
.wait(1)
.to({ y: 10.55, alpha: 0.1 }, 0)
.wait(1)
.to({ y: 9.05, alpha: 0.15 }, 0)
.wait(1)
.to({ y: 7.55, alpha: 0.2 }, 0)
.wait(1)
.to({ y: 6.05, alpha: 0.25 }, 0)
.wait(1)
.to({ y: 4.55, alpha: 0.3 }, 0)
.wait(1)
.to({ y: 3.05, alpha: 0.35 }, 0)
.wait(1)
.to({ y: 1.55, alpha: 0.4 }, 0)
.wait(1)
.to({ y: 0.1, alpha: 0.45 }, 0)
.wait(1)
.to({ y: -1.4, alpha: 0.5 }, 0)
.wait(1)
.to({ y: -2.9, alpha: 0.55 }, 0)
.wait(1)
.to({ y: -4.4, alpha: 0.6 }, 0)
.wait(1)
.to({ y: -5.9, alpha: 0.65 }, 0)
.wait(1)
.to({ y: -7.4, alpha: 0.7 }, 0)
.wait(1)
.to({ y: -8.9, alpha: 0.75 }, 0)
.wait(1)
.to({ y: -10.4, alpha: 0.8 }, 0)
.wait(1)
.to({ y: -11.85, alpha: 0.85 }, 0)
.wait(1)
.to({ y: -13.35, alpha: 0.9 }, 0)
.wait(1)
.to({ y: -14.85, alpha: 0.95 }, 0)
.wait(1)
.to({ y: -16.35, alpha: 1 }, 0)
.wait(1)
.to({ y: -17.85, alpha: 0.95 }, 0)
.wait(1)
.to({ y: -19.35, alpha: 0.9 }, 0)
.wait(1)
.to({ y: -20.85, alpha: 0.85 }, 0)
.wait(1)
.to({ y: -22.35, alpha: 0.8 }, 0)
.wait(1)
.to({ y: -23.8, alpha: 0.75 }, 0)
.wait(1)
.to({ y: -25.3, alpha: 0.7 }, 0)
.wait(1)
.to({ y: -26.8, alpha: 0.65 }, 0)
.wait(1)
.to({ y: -28.3, alpha: 0.6 }, 0)
.wait(1)
.to({ y: -29.8, alpha: 0.55 }, 0)
.wait(1)
.to({ y: -31.3, alpha: 0.5 }, 0)
.wait(1)
.to({ y: -32.8, alpha: 0.45 }, 0)
.wait(1)
.to({ y: -34.3, alpha: 0.4 }, 0)
.wait(1)
.to({ y: -35.75, alpha: 0.35 }, 0)
.wait(1)
.to({ y: -37.25, alpha: 0.3 }, 0)
.wait(1)
.to({ y: -38.75, alpha: 0.25 }, 0)
.wait(1)
.to({ y: -40.25, alpha: 0.2 }, 0)
.wait(1)
.to({ y: -41.75, alpha: 0.15 }, 0)
.wait(1)
.to({ y: -43.25, alpha: 0.1 }, 0)
.wait(1)
.to({ y: -44.75, alpha: 0.05 }, 0)
.wait(1)
.to({ y: -46.25, alpha: 0 }, 0)
.wait(1)
);
// Symbol_2
this.instance_2 = new lib.Symbol2();
this.instance_2.setTransform(15.3, 13.5, 1, 1, 0, 0, 0, 15.3, 13.5);
this.instance_2.alpha = 0;
this.timeline.addTween(
cjs.Tween.get(this.instance_2)
.wait(1)
.to({ y: 12, alpha: 0.0526 }, 0)
.wait(1)
.to({ y: 10.45, alpha: 0.1053 }, 0)
.wait(1)
.to({ y: 8.95, alpha: 0.1579 }, 0)
.wait(1)
.to({ y: 7.4, alpha: 0.2105 }, 0)
.wait(1)
.to({ y: 5.85, alpha: 0.2632 }, 0)
.wait(1)
.to({ y: 4.35, alpha: 0.3158 }, 0)
.wait(1)
.to({ y: 2.8, alpha: 0.3684 }, 0)
.wait(1)
.to({ y: 1.25, alpha: 0.4211 }, 0)
.wait(1)
.to({ y: -0.25, alpha: 0.4737 }, 0)
.wait(1)
.to({ y: -1.8, alpha: 0.5263 }, 0)
.wait(1)
.to({ y: -3.35, alpha: 0.5789 }, 0)
.wait(1)
.to({ y: -4.85, alpha: 0.6316 }, 0)
.wait(1)
.to({ y: -6.4, alpha: 0.6842 }, 0)
.wait(1)
.to({ y: -7.9, alpha: 0.7368 }, 0)
.wait(1)
.to({ y: -9.45, alpha: 0.7895 }, 0)
.wait(1)
.to({ y: -11, alpha: 0.8421 }, 0)
.wait(1)
.to({ y: -12.5, alpha: 0.8947 }, 0)
.wait(1)
.to({ y: -14.05, alpha: 0.9474 }, 0)
.wait(1)
.to({ y: -15.6, alpha: 1 }, 0)
.wait(1)
.to({ y: -17.1, alpha: 0.95 }, 0)
.wait(1)
.to({ y: -18.65, alpha: 0.9 }, 0)
.wait(1)
.to({ y: -20.2, alpha: 0.85 }, 0)
.wait(1)
.to({ y: -21.7, alpha: 0.8 }, 0)
.wait(1)
.to({ y: -23.25, alpha: 0.75 }, 0)
.wait(1)
.to({ y: -24.8, alpha: 0.7 }, 0)
.wait(1)
.to({ y: -26.3, alpha: 0.65 }, 0)
.wait(1)
.to({ y: -27.85, alpha: 0.6 }, 0)
.wait(1)
.to({ y: -29.35, alpha: 0.55 }, 0)
.wait(1)
.to({ y: -30.9, alpha: 0.5 }, 0)
.wait(1)
.to({ y: -32.45, alpha: 0.45 }, 0)
.wait(1)
.to({ y: -33.95, alpha: 0.4 }, 0)
.wait(1)
.to({ y: -35.5, alpha: 0.35 }, 0)
.wait(1)
.to({ y: -37.05, alpha: 0.3 }, 0)
.wait(1)
.to({ y: -38.55, alpha: 0.25 }, 0)
.wait(1)
.to({ y: -40.1, alpha: 0.2 }, 0)
.wait(1)
.to({ y: -41.65, alpha: 0.15 }, 0)
.wait(1)
.to({ y: -43.15, alpha: 0.1 }, 0)
.wait(1)
.to({ y: -44.7, alpha: 0.05 }, 0)
.wait(1)
.to({ y: -46.25, alpha: 0 }, 0)
.wait(1)
.to({ y: 13.5 }, 0)
.wait(1)
.to({ y: 11.95, alpha: 0.0526 }, 0)
.wait(1)
.to({ y: 10.4, alpha: 0.1053 }, 0)
.wait(1)
.to({ y: 8.8, alpha: 0.1579 }, 0)
.wait(1)
.to({ y: 7.25, alpha: 0.2105 }, 0)
.wait(1)
.to({ y: 5.65, alpha: 0.2632 }, 0)
.wait(1)
.to({ y: 4.1, alpha: 0.3158 }, 0)
.wait(1)
.to({ y: 2.5, alpha: 0.3684 }, 0)
.wait(1)
.to({ y: 0.95, alpha: 0.4211 }, 0)
.wait(1)
.to({ y: -0.65, alpha: 0.4737 }, 0)
.wait(1)
.to({ y: -2.2, alpha: 0.5263 }, 0)
.wait(1)
.to({ y: -3.75, alpha: 0.5789 }, 0)
.wait(1)
.to({ y: -5.35, alpha: 0.6316 }, 0)
.wait(1)
.to({ y: -6.9, alpha: 0.6842 }, 0)
.wait(1)
.to({ y: -8.5, alpha: 0.7368 }, 0)
.wait(1)
.to({ y: -10.05, alpha: 0.7895 }, 0)
.wait(1)
.to({ y: -11.65, alpha: 0.8421 }, 0)
.wait(1)
.to({ y: -13.2, alpha: 0.8947 }, 0)
.wait(1)
.to({ y: -14.8, alpha: 0.9474 }, 0)
.wait(1)
.to({ y: -16.35, alpha: 1 }, 0)
.wait(1)
);
this._renderFirstFrame();
}).prototype = p = new cjs.MovieClip();
p.nominalBounds = new cjs.Rectangle(0, -59.7, 30.7, 86.6);
(lib.arrow_grey_mc = function (mode, startPosition, loop, reversed) {
if (loop == null) {
loop = true;
}
if (reversed == null) {
reversed = false;
}
var props = new Object();
props.mode = mode;
props.startPosition = startPosition;
props.labels = {};
props.loop = loop;
props.reversed = reversed;
cjs.MovieClip.apply(this, [props]);
// Layer_1_copy
this.instance = new lib.Symbol4();
this.instance.setTransform(15.2, 38.5, 1, 1, 0, 0, 0, 15.2, 13.8);
this.timeline.addTween(
cjs.Tween.get(this.instance)
.wait(1)
.to({ regX: 15.3, x: 15.3, y: 39.8, alpha: 0.9474 }, 0)
.wait(1)
.to({ y: 41.1, alpha: 0.8947 }, 0)
.wait(1)
.to({ y: 42.4, alpha: 0.8421 }, 0)
.wait(1)
.to({ y: 43.75, alpha: 0.7895 }, 0)
.wait(1)
.to({ y: 45.05, alpha: 0.7368 }, 0)
.wait(1)
.to({ y: 46.35, alpha: 0.6842 }, 0)
.wait(1)
.to({ y: 47.7, alpha: 0.6316 }, 0)
.wait(1)
.to({ y: 49, alpha: 0.5789 }, 0)
.wait(1)
.to({ y: 50.3, alpha: 0.5263 }, 0)
.wait(1)
.to({ y: 51.65, alpha: 0.4737 }, 0)
.wait(1)
.to({ y: 52.95, alpha: 0.4211 }, 0)
.wait(1)
.to({ y: 54.25, alpha: 0.3684 }, 0)
.wait(1)
.to({ y: 55.6, alpha: 0.3158 }, 0)
.wait(1)
.to({ y: 56.9, alpha: 0.2632 }, 0)
.wait(1)
.to({ y: 58.2, alpha: 0.2105 }, 0)
.wait(1)
.to({ y: 59.55, alpha: 0.1579 }, 0)
.wait(1)
.to({ y: 60.85, alpha: 0.1053 }, 0)
.wait(1)
.to({ y: 62.15, alpha: 0.0526 }, 0)
.wait(1)
.to({ y: 63.5, alpha: 0 }, 0)
.to({ _off: true }, 1)
.wait(19)
.to({ _off: false, regX: 15.2, x: 15.2, y: 13.8 }, 0)
.wait(1)
.to({ regX: 15.3, x: 15.3, y: 15, alpha: 0.0526 }, 0)
.wait(1)
.to({ y: 16.2, alpha: 0.1053 }, 0)
.wait(1)
.to({ y: 17.4, alpha: 0.1579 }, 0)
.wait(1)
.to({ y: 18.6, alpha: 0.2105 }, 0)
.wait(1)
.to({ y: 19.85, alpha: 0.2632 }, 0)
.wait(1)
.to({ y: 21.05, alpha: 0.3158 }, 0)
.wait(1)
.to({ y: 22.25, alpha: 0.3684 }, 0)
.wait(1)
.to({ y: 23.45, alpha: 0.4211 }, 0)
.wait(1)
.to({ y: 24.65, alpha: 0.4737 }, 0)
.wait(1)
.to({ y: 25.9, alpha: 0.5263 }, 0)
.wait(1)
.to({ y: 27.1, alpha: 0.5789 }, 0)
.wait(1)
.to({ y: 28.3, alpha: 0.6316 }, 0)
.wait(1)
.to({ y: 29.5, alpha: 0.6842 }, 0)
.wait(1)
.to({ y: 30.7, alpha: 0.7368 }, 0)
.wait(1)
.to({ y: 31.95, alpha: 0.7895 }, 0)
.wait(1)
.to({ y: 33.15, alpha: 0.8421 }, 0)
.wait(1)
.to({ y: 34.35, alpha: 0.8947 }, 0)
.wait(1)
.to({ y: 35.55, alpha: 0.9474 }, 0)
.wait(1)
.to({ y: 36.8, alpha: 1 }, 0)
.wait(1)
);
// Layer_2
this.instance_1 = new lib.Symbol4();
this.instance_1.setTransform(15.2, 13.8, 1, 1, 0, 0, 0, 15.2, 13.8);
this.instance_1.alpha = 0;
this.instance_1._off = true;
this.timeline.addTween(
cjs.Tween.get(this.instance_1)
.wait(20)
.to({ _off: false }, 0)
.wait(1)
.to({ regX: 15.3, x: 15.3, y: 15.1, alpha: 0.0526 }, 0)
.wait(1)
.to({ y: 16.4, alpha: 0.1053 }, 0)
.wait(1)
.to({ y: 17.7, alpha: 0.1579 }, 0)
.wait(1)
.to({ y: 19.05, alpha: 0.2105 }, 0)
.wait(1)
.to({ y: 20.35, alpha: 0.2632 }, 0)
.wait(1)
.to({ y: 21.65, alpha: 0.3158 }, 0)
.wait(1)
.to({ y: 23, alpha: 0.3684 }, 0)
.wait(1)
.to({ y: 24.3, alpha: 0.4211 }, 0)
.wait(1)
.to({ y: 25.6, alpha: 0.4737 }, 0)
.wait(1)
.to({ y: 26.95, alpha: 0.5263 }, 0)
.wait(1)
.to({ y: 28.25, alpha: 0.5789 }, 0)
.wait(1)
.to({ y: 29.55, alpha: 0.6316 }, 0)
.wait(1)
.to({ y: 30.9, alpha: 0.6842 }, 0)
.wait(1)
.to({ y: 32.2, alpha: 0.7368 }, 0)
.wait(1)
.to({ y: 33.5, alpha: 0.7895 }, 0)
.wait(1)
.to({ y: 34.85, alpha: 0.8421 }, 0)
.wait(1)
.to({ y: 36.15, alpha: 0.8947 }, 0)
.wait(1)
.to({ y: 37.45, alpha: 0.9474 }, 0)
.wait(1)
.to({ y: 38.8, alpha: 1 }, 0)
.wait(1)
.to({ y: 40.1, alpha: 0.9474 }, 0)
.wait(1)
.to({ y: 41.4, alpha: 0.8947 }, 0)
.wait(1)
.to({ y: 42.7, alpha: 0.8421 }, 0)
.wait(1)
.to({ y: 44.05, alpha: 0.7895 }, 0)
.wait(1)
.to({ y: 45.35, alpha: 0.7368 }, 0)
.wait(1)
.to({ y: 46.65, alpha: 0.6842 }, 0)
.wait(1)
.to({ y: 48, alpha: 0.6316 }, 0)
.wait(1)
.to({ y: 49.3, alpha: 0.5789 }, 0)
.wait(1)
.to({ y: 50.6, alpha: 0.5263 }, 0)
.wait(1)
.to({ y: 51.95, alpha: 0.4737 }, 0)
.wait(1)
.to({ y: 53.25, alpha: 0.4211 }, 0)
.wait(1)
.to({ y: 54.55, alpha: 0.3684 }, 0)
.wait(1)
.to({ y: 55.9, alpha: 0.3158 }, 0)
.wait(1)
.to({ y: 57.2, alpha: 0.2632 }, 0)
.wait(1)
.to({ y: 58.5, alpha: 0.2105 }, 0)
.wait(1)
.to({ y: 59.85, alpha: 0.1579 }, 0)
.wait(1)
.to({ y: 61.15, alpha: 0.1053 }, 0)
.wait(1)
.to({ y: 62.45, alpha: 0.0526 }, 0)
.wait(1)
.to({ y: 63.8, alpha: 0 }, 0)
.wait(1)
);
// Layer_1
this.instance_2 = new lib.Symbol4();
this.instance_2.setTransform(15.2, 13.8, 1, 1, 0, 0, 0, 15.2, 13.8);
this.instance_2.alpha = 0;
this.timeline.addTween(
cjs.Tween.get(this.instance_2)
.wait(1)
.to({ regX: 15.3, x: 15.3, y: 15.1, alpha: 0.0526 }, 0)
.wait(1)
.to({ y: 16.4, alpha: 0.1053 }, 0)
.wait(1)
.to({ y: 17.7, alpha: 0.1579 }, 0)
.wait(1)
.to({ y: 19.05, alpha: 0.2105 }, 0)
.wait(1)
.to({ y: 20.35, alpha: 0.2632 }, 0)
.wait(1)
.to({ y: 21.65, alpha: 0.3158 }, 0)
.wait(1)
.to({ y: 23, alpha: 0.3684 }, 0)
.wait(1)
.to({ y: 24.3, alpha: 0.4211 }, 0)
.wait(1)
.to({ y: 25.6, alpha: 0.4737 }, 0)
.wait(1)
.to({ y: 26.95, alpha: 0.5263 }, 0)
.wait(1)
.to({ y: 28.25, alpha: 0.5789 }, 0)
.wait(1)
.to({ y: 29.55, alpha: 0.6316 }, 0)
.wait(1)
.to({ y: 30.9, alpha: 0.6842 }, 0)
.wait(1)
.to({ y: 32.2, alpha: 0.7368 }, 0)
.wait(1)
.to({ y: 33.5, alpha: 0.7895 }, 0)
.wait(1)
.to({ y: 34.85, alpha: 0.8421 }, 0)
.wait(1)
.to({ y: 36.15, alpha: 0.8947 }, 0)
.wait(1)
.to({ y: 37.45, alpha: 0.9474 }, 0)
.wait(1)
.to({ y: 38.8, alpha: 1 }, 0)
.wait(1)
.to({ y: 40.1, alpha: 0.9474 }, 0)
.wait(1)
.to({ y: 41.4, alpha: 0.8947 }, 0)
.wait(1)
.to({ y: 42.7, alpha: 0.8421 }, 0)
.wait(1)
.to({ y: 44.05, alpha: 0.7895 }, 0)
.wait(1)
.to({ y: 45.35, alpha: 0.7368 }, 0)
.wait(1)
.to({ y: 46.65, alpha: 0.6842 }, 0)
.wait(1)
.to({ y: 48, alpha: 0.6316 }, 0)
.wait(1)
.to({ y: 49.3, alpha: 0.5789 }, 0)
.wait(1)
.to({ y: 50.6, alpha: 0.5263 }, 0)
.wait(1)
.to({ y: 51.95, alpha: 0.4737 }, 0)
.wait(1)
.to({ y: 53.25, alpha: 0.4211 }, 0)
.wait(1)
.to({ y: 54.55, alpha: 0.3684 }, 0)
.wait(1)
.to({ y: 55.9, alpha: 0.3158 }, 0)
.wait(1)
.to({ y: 57.2, alpha: 0.2632 }, 0)
.wait(1)
.to({ y: 58.5, alpha: 0.2105 }, 0)
.wait(1)
.to({ y: 59.85, alpha: 0.1579 }, 0)
.wait(1)
.to({ y: 61.15, alpha: 0.1053 }, 0)
.wait(1)
.to({ y: 62.45, alpha: 0.0526 }, 0)
.wait(1)
.to({ y: 63.8, alpha: 0 }, 0)
.to({ _off: true }, 1)
.wait(20)
);
this._renderFirstFrame();
}).prototype = p = new cjs.MovieClip();
p.nominalBounds = new cjs.Rectangle(0, 0, 30.6, 77.6);
// stage content:
(lib._6 = function (mode, startPosition, loop, reversed) {
if (loop == null) {
loop = true;
}
if (reversed == null) {
reversed = false;
}
var props = new Object();
props.mode = mode;
props.startPosition = startPosition;
props.labels = {};
props.loop = loop;
props.reversed = reversed;
cjs.MovieClip.apply(this, [props]);
// FlashAICB
this.instance = new lib.arrows_fly_mc();
this.instance.setTransform(505.45, 94, 0.9973, 0.9967, 0, 0, 0, 15.3, 8.7);
var instanceFilter_1 = new cjs.ColorFilter(-0.71875, 1, -1, 1, 0, 146, 0, 0);
this.instance.filters = [instanceFilter_1];
this.instance.cache(-2, -62, 35, 91);
this.instance_1 = new lib.arrows_fly_mc();
this.instance_1.setTransform(423.45, 114.45, 0.9973, 0.9967, 0, 0, 0, 15.3, 8.7);
var instance_1Filter_2 = new cjs.ColorFilter(-0.71875, 1, -1, 1, 0, 146, 0, 0);
this.instance_1.filters = [instance_1Filter_2];
this.instance_1.cache(-2, -62, 35, 91);
this.instance_2 = new lib.arrow_grey_mc();
this.instance_2.setTransform(259.3, 114.6, 1.0038, 1.0037, 0, 0, 0, 15.2, 13.8);
this.instance_3 = new lib.arrow_grey_mc();
this.instance_3.setTransform(177.25, 136, 1.0038, 1.0037, 0, 0, 0, 15.2, 13.8);
this.instance_4 = new lib.arrows_fly_mc();
this.instance_4.setTransform(342.75, 136.05, 0.9973, 0.9967, 0, 0, 0, 15.3, 8.7);
var instance_4Filter_3 = new cjs.ColorFilter(-0.71875, 1, -1, 1, 0, 146, 0, 0);
this.instance_4.filters = [instance_4Filter_3];
this.instance_4.cache(-2, -62, 35, 91);
this.instance_5 = new lib.arrow_grey_mc();
this.instance_5.setTransform(95.2, 156.6, 1.0038, 1.0037, 0, 0, 0, 15.2, 13.8);
this.timeline.addTween(
cjs.Tween.get({})
.to({
state: [
{ t: this.instance_5 },
{ t: this.instance_4 },
{ t: this.instance_3 },
{ t: this.instance_2 },
{ t: this.instance_1 },
{ t: this.instance },
],
})
.wait(1)
);
this.timeline.addTween(cjs.Tween.get(instanceFilter_1).wait(1));
this.timeline.addTween(cjs.Tween.get(instance_1Filter_2).wait(1));
this.timeline.addTween(cjs.Tween.get(instance_4Filter_3).wait(1));
this.filterCacheList = [];
this.filterCacheList.push({
instance: this.instance,
startFrame: 0,
endFrame: 1,
x: -2,
y: -62,
w: 35,
h: 91,
});
this.filterCacheList.push({
instance: this.instance_1,
startFrame: 0,
endFrame: 1,
x: -2,
y: -62,
w: 35,
h: 91,
});
this.filterCacheList.push({
instance: this.instance_4,
startFrame: 0,
endFrame: 1,
x: -2,
y: -62,
w: 35,
h: 91,
});
this._renderFirstFrame();
}).prototype = p = new lib.AnMovieClip();
p.nominalBounds = new cjs.Rectangle(420, 395.6, 100.79999999999995, -200.40000000000003);
// library properties:
lib.properties = {
id: 'D4460288217B4A1698F41885D25C9E28',
width: 680,
height: 680,
fps: 24,
color: '#FFFFFF',
opacity: 0.0,
manifest: [],
preloads: [],
};
// bootstrap callback support:
(lib.Stage = function (canvas) {
createjs.Stage.call(this, canvas);
}).prototype = p = new createjs.Stage();
p.setAutoPlay = function (autoPlay) {
this.tickEnabled = autoPlay;
};
p.play = function () {
this.tickEnabled = true;
this.getChildAt(0).gotoAndPlay(this.getTimelinePosition());
};
p.stop = function (ms) {
if (ms) this.seek(ms);
this.tickEnabled = false;
};
p.seek = function (ms) {
this.tickEnabled = true;
this.getChildAt(0).gotoAndStop((lib.properties.fps * ms) / 1000);
};
p.getDuration = function () {
return (this.getChildAt(0).totalFrames / lib.properties.fps) * 1000;
};
p.getTimelinePosition = function () {
return (this.getChildAt(0).currentFrame / lib.properties.fps) * 1000;
};
an.bootcompsLoaded = an.bootcompsLoaded || [];
if (!an.bootstrapListeners) {
an.bootstrapListeners = [];
}
an.bootstrapCallback = function (fnCallback) {
an.bootstrapListeners.push(fnCallback);
if (an.bootcompsLoaded.length > 0) {
for (var i = 0; i < an.bootcompsLoaded.length; ++i) {
fnCallback(an.bootcompsLoaded[i]);
}
}
};
an.compositions = an.compositions || {};
an.compositions['D4460288217B4A1698F41885D25C9E28'] = {
getStage: function () {
return exportRoot.stage;
},
getLibrary: function () {
return lib;
},
getSpriteSheet: function () {
return ss;
},
getImages: function () {
return img;
},
};
an.compositionLoaded = function (id) {
an.bootcompsLoaded.push(id);
for (var j = 0; j < an.bootstrapListeners.length; j++) {
an.bootstrapListeners[j](id);
}
};
an.getComposition = function (id) {
return an.compositions[id];
};
an.makeResponsive = function (isResp, respDim, isScale, scaleType, domContainers) {
var lastW,
lastH,
lastS = 1;
window.addEventListener('resize', resizeCanvas);
resizeCanvas();
function resizeCanvas() {
var w = lib.properties.width,
h = lib.properties.height;
var iw = window.innerWidth,
ih = window.innerHeight;
var pRatio = window.devicePixelRatio || 1,
xRatio = iw / w,
yRatio = ih / h,
sRatio = 1;
if (isResp) {
if ((respDim == 'width' && lastW == iw) || (respDim == 'height' && lastH == ih)) {
sRatio = lastS;
} else if (!isScale) {
if (iw < w || ih < h) sRatio = Math.min(xRatio, yRatio);
} else if (scaleType == 1) {
sRatio = Math.min(xRatio, yRatio);
} else if (scaleType == 2) {
sRatio = Math.max(xRatio, yRatio);
}
}
domContainers[0].width = w * pRatio * sRatio;
domContainers[0].height = h * pRatio * sRatio;
domContainers.forEach(function (container) {
container.style.width = w * sRatio + 'px';
container.style.height = h * sRatio + 'px';
});
stage.scaleX = pRatio * sRatio;
stage.scaleY = pRatio * sRatio;
lastW = iw;
lastH = ih;
lastS = sRatio;
stage.tickOnUpdate = false;
stage.update();
stage.tickOnUpdate = true;
}
};
an.handleSoundStreamOnTick = function (event) {
if (!event.paused) {
var stageChild = stage.getChildAt(0);
if (!stageChild.paused || stageChild.ignorePause) {
stageChild.syncStreamSounds();
}
}
};
an.handleFilterCache = function (event) {
if (!event.paused) {
var target = event.target;
if (target) {
if (target.filterCacheList) {
for (var index = 0; index < target.filterCacheList.length; index++) {
var cacheInst = target.filterCacheList[index];
if (cacheInst.startFrame <= target.currentFrame && target.currentFrame <= cacheInst.endFrame) {
cacheInst.instance.cache(cacheInst.x, cacheInst.y, cacheInst.w, cacheInst.h);
}
}
}
}
}
};
}
let createjs, AdobeAn;
let canvas, stage, exportRoot, anim_container, dom_overlay_container, fnStartAnimation;
function init6() {
canvas = document.getElementById('block-work__canvas6');
anim_container = document.getElementById('block-work__animation_container6');
dom_overlay_container = document.getElementById('block-work__dom_overlay_container6');
var comp = AdobeAn.getComposition('D4460288217B4A1698F41885D25C9E28');
var lib = comp.getLibrary();
handleComplete6({}, comp);
}
function handleComplete6(evt, comp) {
//This function is always called, irrespective of the content. You can use the variable "stage" after it is created in token create_stage.
var lib = comp.getLibrary();
var ss = comp.getSpriteSheet();
exportRoot = new lib._6();
exportRoot.addEventListener('tick', AdobeAn.handleFilterCache);
stage = new lib.Stage(canvas);
//Registers the "tick" event listener.
fnStartAnimation = function () {
stage.addChild(exportRoot);
createjs.Ticker.framerate = lib.properties.fps;
createjs.Ticker.addEventListener('tick', stage);
};
//Code to support hidpi screens and responsive scaling.
AdobeAn.makeResponsive(true, 'both', false, 1, [canvas, anim_container, dom_overlay_container]);
AdobeAn.compositionLoaded(lib.properties.id);
fnStartAnimation();
}
if (window.createjs || window.AdobeAn) {
anim6((createjs = window.createjs || {}), (AdobeAn = window.AdobeAn || {}));
init6();
}
}
}
});
</script>
<div class="block-work">
<div class="container">
<div class="block-work__wrapper">
<div class="block-work__content">
<p class="block-work__title">{$t('turnkey-solution.How we work')}</p>
<p class="block-work__subtitle">
{$t('turnkey-solution.At Quadcode, we shoulder the responsibility of maintaining infrastructure, managing risks, ensuring liquidity, and providing unwavering support. We handle the intricacies of brokerage operations, giving you the freedom to prioritize client relationships and business growth.')}
</p>
<Button text={$t('turnkey-solution.Book Demo')} className="block-work__button" onClick={() => popupForm.set(true)} />
</div>
<div class="block-work__animation">
<div class="block-work__block you">
<div class="block-work__blockLine" />
<p class="block-work__blockTitle">{$t('turnkey-solution.You')}</p>
<p class="block-work__blockText">
{$t('turnkey-solution.Focus on your business goals, while we ensure the smooth operation of your brokerage infrastructure. Just attract clients and capitalize on their trading activity.')}
</p>
</div>
<div class="block-work__animationContent">
<div class="block-work__animationContentItem you" />
<div class="block-work__animationContentItem quadcode" />
<img src={img1} alt="" class="block-work__animationLayer block-work__animationLayer1" loading="lazy" />
<div
id="block-work__animation_container2"
class="block-work__animationLayer block-work__animationLayer2"
style="background-color:rgba(255, 255, 255, 0.00); width:680px; height:680px"
>
<canvas
id="block-work__canvas2"
class="block-work__canvas"
width="680"
height="680"
style="position: absolute; display: block; background-color:rgba(255, 255, 255, 0.00);"
/>
<div
id="block-work__dom_overlay_container2"
style="pointer-events:none; overflow:hidden; width:680px; height:680px; position: absolute; left: 0px; top: 0px; display: block;"
/>
</div>
<img src={img3} alt="" class="block-work__animationLayer block-work__animationLayer3" loading="lazy" />
<div
id="block-work__animation_container4"
class="block-work__animationLayer block-work__animationLayer4"
style="background-color:rgba(255, 255, 255, 0.00); width:680px; height:680px"
>
<canvas
id="block-work__canvas4"
class="block-work__canvas"
width="680"
height="680"
style="position: absolute; display: block; background-color:rgba(255, 255, 255, 0.00);"
/>
<div
id="block-work__dom_overlay_container4"
style="pointer-events:none; overflow:hidden; width:680px; height:680px; position: absolute; left: 0px; top: 0px; display: block;"
/>
</div>
<img src={img5} alt="" class="block-work__animationLayer block-work__animationLayer5" loading="lazy" />
<div
id="block-work__animation_container6"
class="block-work__animationLayer block-work__animationLayer6"
style="background-color:rgba(255, 255, 255, 0.00); width:680px; height:680px"
>
<canvas
id="block-work__canvas6"
class="block-work__canvas"
width="680"
height="680"
style="position: absolute; display: block; background-color:rgba(255, 255, 255, 0.00);"
/>
<div
id="block-work__dom_overlay_container6"
style="pointer-events:none; overflow:hidden; width:680px; height:680px; position: absolute; left: 0px; top: 0px; display: block;"
/>
</div>
</div>
<img src={work} alt="" loading="lazy" />
<div class="block-work__block quadcode">
<div class="block-work__blockLine" />
<p class="block-work__blockTitle">{$t('turnkey-solution.Quadcode')}</p>
<p class="block-work__blockText">
{$t('turnkey-solution.We provide a comprehensive, all-in-one solution encompassing trading platform, back office, liquidity, billing, risk management, and compliance, allowing you to leave development concerns behind.')}
</p>
</div>
</div>
</div>
</div>
</div>
<style lang="scss">
@import 'src/scss/media';
@import 'src/scss/mixins';
@import 'src/scss/variables';
.block-work {
padding: 128px 0;
@include breakpoint-down('deskL') {
padding-top: 43px;
padding-bottom: 63px;
}
@include breakpoint-down('deskS') {
padding-top: 64px;
padding-bottom: 64px;
}
@include breakpoint-down('tabM') {
padding-top: 80px;
padding-bottom: 83px;
}
&__wrapper {
display: flex;
align-items: center;
justify-content: space-between;
gap: 156px;
@include breakpoint-down('deskL') {
gap: 128px;
}
@include breakpoint-down('deskS') {
gap: 20px;
}
@include breakpoint-down('tabM') {
flex-wrap: wrap;
gap: 80px;
}
}
&__content {
width: 100%;
max-width: 564px;
@include breakpoint-down('deskL') {
max-width: 448px;
}
@include breakpoint-down('deskS') {
max-width: 295px;
}
@include breakpoint-down('tabM') {
max-width: none;
}
}
&__title {
@include titleL;
margin-bottom: 24px;
@include breakpoint-down('deskL') {
margin-bottom: 16px;
}
@include breakpoint-down('tabM') {
text-align: center;
margin-bottom: 8px;
}
}
&__subtitle {
margin-bottom: 40px;
@include breakpoint-down('deskS') {
margin-bottom: 24px;
}
@include breakpoint-down('tabM') {
text-align: center;
margin-bottom: 40px;
}
}
& :global(.block-work__button) {
@include baseCTA;
width: 260px;
@include breakpoint-down('deskS') {
width: max-content;
}
@include breakpoint-down('tabM') {
margin-inline: auto;
}
}
&__animationContent {
position: relative;
z-index: 0;
width: 680px;
height: 680px;
@include breakpoint-down('deskL') {
width: 544px;
height: 544px;
}
@include breakpoint-down('deskS') {
width: 373px;
height: 373px;
}
@include breakpoint-down('tabM') {
display: none;
}
}
&__animationContentItem {
position: absolute;
height: 50%;
z-index: 10;
cursor: pointer;
@include breakpoint-down('tabM') {
display: none;
}
&.you {
top: 0;
left: 0;
right: 0;
bottom: 50%;
}
&.quadcode {
top: 50%;
left: 0;
right: 0;
bottom: 0;
}
}
&__animationLayer {
position: absolute;
left: 0;
top: 0;
width: 100% !important;
height: 100% !important;
pointer-events: none;
user-select: none;
transition: 0.3s cubic-bezier(0.46, 0.03, 0.52, 0.96);
&1 {
z-index: 0;
}
&2 {
z-index: 1;
}
&3 {
z-index: 2;
}
&4 {
z-index: 3;
}
&5 {
z-index: 4;
top: -28px;
left: 7px;
@include breakpoint-down('deskL') {
top: -22px;
left: 4px;
}
@include breakpoint-down('deskS') {
top: -16px;
left: 4px;
}
}
&6 {
z-index: 5;
}
}
&__canvas {
width: 100% !important;
height: 100% !important;
}
&__animation {
padding: 72px 0;
position: relative;
@include breakpoint-down('deskL') {
padding-top: 69px;
padding-bottom: 49px;
}
@include breakpoint-down('deskS') {
padding-top: 104px;
padding-bottom: 93px;
}
@include breakpoint-down('tabM') {
padding-bottom: 114px;
margin-inline: auto;
}
> img {
display: none;
@include breakpoint-down('tabM') {
display: block;
max-width: 335px;
}
}
}
&__block {
width: 100%;
max-width: 360px;
position: absolute;
left: 195px;
z-index: 1;
cursor: pointer;
@include breakpoint-down('deskL') {
left: 160px;
max-width: 384px;
}
@include breakpoint-down('deskS') {
max-width: 216px;
left: 42%;
}
@include breakpoint-down('tabM') {
left: 31%;
max-width: 230px;
}
&.you {
top: 0;
@include breakpoint-down('deskL') {
top: 4px;
}
@include breakpoint-down('deskS') {
top: 0;
}
.block-work__blockLine {
top: 0;
border-left: 1px solid $techBlueSecondary;
@include breakpoint-down('deskL') {
height: 250px;
}
@include breakpoint-down('deskS') {
height: 173%;
}
&:after {
transition: 0.3s cubic-bezier(0.46, 0.03, 0.52, 0.96);
background: $techBluePrimary;
bottom: -17px;
@include breakpoint-down('deskS') {
bottom: -9px;
}
}
&:before {
transition: 0.3s cubic-bezier(0.46, 0.03, 0.52, 0.96);
border: 1px solid $techBlueSecondary;
bottom: -25px;
background: $techWhite15;
@include breakpoint-down('deskS') {
bottom: -14px;
}
}
}
}
&.quadcode {
bottom: 0;
.block-work__blockLine {
bottom: 0;
border-left: 1px solid $techBlue2;
@include breakpoint-down('deskL') {
height: 220px;
}
@include breakpoint-down('deskS') {
height: 185%;
}
@include breakpoint-down('tabM') {
height: 171%;
}
&:after {
transition: 0.3s cubic-bezier(0.46, 0.03, 0.52, 0.96);
background: $redPrimary50;
top: -17px;
@include breakpoint-down('deskS') {
top: -9px;
}
}
&:before {
transition: 0.3s cubic-bezier(0.46, 0.03, 0.52, 0.96);
border: 1px solid $techBlue2;
top: -25px;
background: $fontWhite50;
@include breakpoint-down('deskS') {
top: -14px;
}
}
}
}
}
&__blockLine {
position: absolute;
height: 280px;
width: 0;
left: -20px;
@include breakpoint-down('deskL') {
left: -12px;
}
@include breakpoint-down('deskS') {
left: -21px;
}
@include breakpoint-down('tabM') {
left: -15px;
}
&:after {
content: '';
position: absolute;
width: 9px;
height: 9px;
border-radius: 100%;
left: 50%;
transform: translateX(-50%);
z-index: 2;
@include breakpoint-down('deskS') {
width: 5px;
height: 5px;
}
}
&:before {
content: '';
position: absolute;
width: 25px;
height: 25px;
border-radius: 100%;
left: 50%;
transform: translateX(-50%);
z-index: 1;
@include breakpoint-down('deskS') {
width: 13px;
height: 13px;
}
}
}
&__blockTitle {
@include titleM;
margin-bottom: 4px;
@include breakpoint-down('deskL') {
margin-bottom: 7px;
}
}
&__blockText {
@include smallDefault;
}
}
:global(.block-work__animation.quadcode) {
.block-work__animationLayer5 {
opacity: 0.3;
}
.block-work__animationLayer6 {
opacity: 0;
}
.block-work__block {
&.quadcode {
.block-work__blockLine {
&:before {
width: 30px;
height: 30px;
top: -29px;
@include breakpoint-down('deskS') {
width: 18px;
height: 18px;
top: -17px;
}
}
&:after {
width: 14px;
height: 14px;
top: -21px;
@include breakpoint-down('deskS') {
width: 10px;
height: 10px;
top: -13px;
}
}
}
}
}
}
:global(.block-work__animation.you) {
.block-work__animationLayer1 {
opacity: 0.3;
}
.block-work__animationLayer2 {
opacity: 0;
}
.block-work__animationLayer3 {
opacity: 0.3;
}
.block-work__animationLayer4 {
opacity: 0;
}
.block-work__block {
&.you {
.block-work__blockLine {
&:before {
width: 30px;
height: 30px;
bottom: -29px;
@include breakpoint-down('deskS') {
width: 18px;
height: 18px;
bottom: -17px;
}
}
&:after {
width: 14px;
height: 14px;
bottom: -21px;
@include breakpoint-down('deskS') {
width: 10px;
height: 10px;
bottom: -13px;
}
}
}
}
}
}
</style>