let contentForAnimBg = `
`
document.querySelector("#dna-animation").innerHTML = contentForAnimBg;
document.addEventListener("DOMContentLoaded", function () {
gsap.to("#dna-animation svg", { duration: 0.3, opacity: 1 })
particlesJS("banner__particles",
{
"particles": {
"number":
{
"value": fDotsParam.count, "density":
{ "enable": false, "value_area": 4000 }
},
"color":
{ "value": fDotsParam.color },
"shape":
{
"type": "circle", "stroke":
{ "width": 0, "color": "#000000" }, "polygon":
{ "nb_sides": 5 }, "image":
{ "src": "", "width": 100, "height": 100 }
},
"opacity":
{
"value": fDotsParam.opacity, "random": fDotsParam.opacityRandom, "anim":
{ "enable": false, "speed": 1, "opacity_min": 0.1, "sync": false }
},
"size":
{
"value": fDotsParam.maxSize, "random": true, "anim":
{ "enable": false, "speed": 80, "size_min": 0.1, "sync": false }
},
"line_linked":
{
"enable": false, "distance": 150, "color": "#ffffff", "opacity": 0.4, "width": 1
},
"move":
{
"enable": true, "speed": fDotsParam.speed, "direction": "none", "random": false, "straight": false, "out_mode": "out", "bounce": false, "attract":
{ "enable": false, "rotateX": 600, "rotateY": 1200 }
}
},
"interactivity": {
"detect_on": "canvas",
"events": {
"onhover": { "enable": false, "mode": "grab" },
"onclick": { "enable": false, "mode": "push" },
"resize": true
}
},
"retina_detect": true
});
function dnaMove(target) {
gsap.set(target.line, {
attr: {
x1: target.x1,
y1: target.y1,
x2: target.x2,
y2: target.y2,
}
})
gsap.set(target.circle1, { attr: { cx: target.x1, cy: target.y1, r: target.r1 } })
gsap.set(target.circle2, { attr: { cx: target.x2, cy: target.y2, r: target.r2 } })
}
let pointDnaArr2 = []
document.querySelectorAll("#dnaSvg2 #dnaMove > *").forEach(function (elem, index) {
pointDnaArr2.push({
target: elem,
line: elem.children[0],
circle1: elem.children[1],
circle2: elem.children[2],
x1: elem.children[0].getAttribute("x1"),
y1: Number(elem.children[0].getAttribute("y1")) + dnaParam.koffY,
x2: elem.children[0].getAttribute("x2"),
y2: Number(elem.children[0].getAttribute("y2")) - dnaParam.koffY,
r1: elem.children[1].getAttribute("r") * dnaParam.size,
r2: elem.children[2].getAttribute("r") * dnaParam.size,
})
})
pointDnaArr2.forEach(function (elem, index) {
let tempY = (elem.y2 - elem.y1).toFixed(0)
gsap.to(elem, {
y1: "+=" + tempY,
y2: "+=" + -tempY,
repeat: -1, yoyo: true,
duration: 30 * dnaParam.speed, ease: "sine.inOut",
onUpdate: function () { dnaMove(this._targets[0]) }
}, -index / (0.5 / dnaParam.speed))
gsap.to(elem, {
x1: "+=" + -10,
x2: "+=" + 10,
repeat: -1, yoyo: true,
duration: 1 * dnaParam.speed, ease: "sine.inOut",
}, -index / 10)
gsap.to(elem, {
r1: elem.r1 * (dnaParam.scale),
r2: elem.r2 * (dnaParam.scale),
repeat: -1, yoyo: true,
duration: 2, ease: "sine.inOut",
}, -index / 10)
})
})