m |
m |
||
Line 1: | Line 1: | ||
let timeout1, timeout2; | let timeout1, timeout2; | ||
− | function | + | function setBubblesSubsection(newSection, curAnim) { |
− | + | ||
− | + | ||
− | + | ||
if (curAnim.curSection === newSection) return; | if (curAnim.curSection === newSection) return; | ||
− | |||
− | |||
Array.from(curAnim.bubbleIndex.children).forEach((item, ind)=>{ | Array.from(curAnim.bubbleIndex.children).forEach((item, ind)=>{ | ||
− | if (ind <= | + | if (ind <= newSection){ |
item.classList.add("active"); | item.classList.add("active"); | ||
}else{ | }else{ | ||
Line 15: | Line 10: | ||
} | } | ||
}); | }); | ||
+ | } | ||
− | let { bigTitle, title, text | + | function makeAnimSubsection(sectionNum, curAnim) { |
+ | console.log(sectionNum); | ||
+ | let { bigTitle, title, text } = curAnim.sections[sectionNum]; | ||
if (bigTitle !== undefined) bigTitle = bigTitle.replace("&", "&"); | 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; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
Line 66: | Line 55: | ||
animItem.bubbleIndex = crEl("bubbleIndex"); | animItem.bubbleIndex = crEl("bubbleIndex"); | ||
animBlock.appendChild(animItem.bubbleIndex); | animBlock.appendChild(animItem.bubbleIndex); | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
/*/ | /*/ | ||
Line 103: | Line 79: | ||
const scrollBackElement = crEl("scrollAnim"); // create scroll back element (to be used in ScrollTrigger) | const scrollBackElement = crEl("scrollAnim"); // create scroll back element (to be used in ScrollTrigger) | ||
animBlock.parentElement.appendChild(scrollBackElement); // add it to document | animBlock.parentElement.appendChild(scrollBackElement); // add it to document | ||
+ | scrollBackElement.appendChild(makeAnimSubsection(i, animItem)) | ||
const scrollBubbleElement = crEl("scrollBubble"); | const scrollBubbleElement = crEl("scrollBubble"); | ||
Line 125: | Line 102: | ||
let animationProgress = (_compoundLength + self.progress * item.length); | let animationProgress = (_compoundLength + self.progress * item.length); | ||
if (debug) console.log((animationProgress + "").substr(0, 6)) // DEBUG | if (debug) console.log((animationProgress + "").substr(0, 6)) // DEBUG | ||
− | + | setBubblesSubsection(i, animItem); | |
anim.goToAndStop(animationProgress * (anim.totalFrames - 1), true); | anim.goToAndStop(animationProgress * (anim.totalFrames - 1), true); | ||
} | } | ||
Line 132: | Line 109: | ||
} | } | ||
− | const scrollBackPaddingElement = crEl("scrollAnim"); // for end padding | + | const scrollBackPaddingElement = crEl("scrollAnim lastPad"); // for end padding |
animBlock.parentElement.appendChild(scrollBackPaddingElement); // add it to document | animBlock.parentElement.appendChild(scrollBackPaddingElement); // add it to document | ||
anim.goToAndStop(animItem.animBegin * (anim.totalFrames - 1), true); | anim.goToAndStop(animItem.animBegin * (anim.totalFrames - 1), true); | ||
} | } | ||
− | + | setBubblesSubsection(0, animItem); | |
ScrollLottie({ | ScrollLottie({ | ||
target: animItem.target, | target: animItem.target, | ||
animationData: animItem.animationData, | animationData: animItem.animationData, | ||
− | assetsPath: "https://static.igem.org/mediawiki/2020/", | + | assetsPath: animItem.assetsPath, |
+ | //assetsPath: "https://static.igem.org/mediawiki/2020/", | ||
}); | }); | ||
} | } |
Revision as of 14:49, 22 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) {
console.log(sectionNum); 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: animItem.assetsPath, //assetsPath: "https://static.igem.org/mediawiki/2020/", });
}