m |
m |
||
Line 13: | Line 13: | ||
function makeAnimSubsection(sectionNum, curAnim) { | function makeAnimSubsection(sectionNum, curAnim) { | ||
− | |||
let { bigTitle, title, text } = curAnim.sections[sectionNum]; | let { bigTitle, title, text } = curAnim.sections[sectionNum]; | ||
if (bigTitle !== undefined) bigTitle = bigTitle.replace("&", "&"); | if (bigTitle !== undefined) bigTitle = bigTitle.replace("&", "&"); |
Revision as of 18:18, 23 October 2020
let timeout1, timeout2; function setBubblesSubsection(newSection, curAnim) {
if (curAnim.curSection === newSection) return;
Array.from(curAnim.bubbleIndex.children).forEach((item, ind)=>{ if (ind <= newSection){ item.classList.add("active"); }else{ item.classList.remove("active"); } });
}
function makeAnimSubsection(sectionNum, curAnim) {
let { bigTitle, title, text } = curAnim.sections[sectionNum]; if (bigTitle !== undefined) bigTitle = bigTitle.replace("&", "&");
let contentEl = crEl("content"); let bigTitleEl = crEl("h2 larger"); contentEl.appendChild(bigTitleEl);
let titleEl = crEl("h3"); contentEl.appendChild(titleEl);
let textEl = document.createElement("p"); contentEl.appendChild(textEl);
bigTitleEl.innerText = (bigTitle !== undefined) ? bigTitle : ""; titleEl.innerText = (title !== undefined) ? title : ""; textEl.innerHTML = text;
return contentEl;
}
function crEl(className){
let el = document.createElement("div"); el.className = className; return el;
}
for (let animItem of animations){
/*/ Create animation block elements /*/
const animBlock = document.querySelector(animItem.block); animItem.scrollItem = crEl("scrollItem"); animBlock.appendChild(animItem.scrollItem);
const animElement = document.createElement("div"); // used in ScrollLottie animItem.scrollItem.appendChild(animElement);
animItem.bubbleIndex = crEl("bubbleIndex"); animBlock.appendChild(animItem.bubbleIndex);
/*/ Set up animation /*/ const ScrollLottie = (obj) => { let anim = lottie.loadAnimation({ container: animElement, renderer: "svg", loop: false, autoplay: false, animationData: obj.animationData, assetsPath: obj.assetsPath });
let debug = false; let start = "top center"; let end = "bottom center"; let compoundLength = animItem.animBegin; for (let i = 0, n = animItem.sections.length; i < n; i++){ let item = animItem.sections[i]; let _compoundLength = compoundLength;
const scrollBackElement = crEl("scrollAnim"); // create scroll back element (to be used in ScrollTrigger) animBlock.parentElement.appendChild(scrollBackElement); // add it to document scrollBackElement.appendChild(makeAnimSubsection(i, animItem))
const scrollBubbleElement = crEl("scrollBubble"); if (i == 0) scrollBubbleElement.classList.add("active"); animItem.bubbleIndex.appendChild(scrollBubbleElement); scrollBubbleElement.onclick = () => { _ascroll.animateScroll(scrollBackElement, 1, { speed: 400, speedAsDuration: true, offset: 160 }); };
ScrollTrigger.create({ trigger: scrollBackElement, scrub: true, pin: false, markers: debug, start: start, end: end, onUpdate: self => { let animationProgress = (_compoundLength + self.progress * item.length); if (debug) console.log((animationProgress + "").substr(0, 6)) // DEBUG setBubblesSubsection(i, animItem); anim.goToAndStop(animationProgress * (anim.totalFrames - 1), true); } }); compoundLength += item.length; } const scrollBackPaddingElement = crEl("scrollAnim lastPad"); // for end padding animBlock.parentElement.appendChild(scrollBackPaddingElement); // add it to document anim.goToAndStop(animItem.animBegin * (anim.totalFrames - 1), true); } setBubblesSubsection(0, animItem);
ScrollLottie({ target: animItem.target, animationData: animItem.animationData, assetsPath: "https://static.igem.org/mediawiki/2020/", });
}