(Created page with "let timeout1, timeout2; function switchAnimSubsection(newSection, curAnim) { let load = (newSection === -1); if (load) newSection = 0; if (curAnim.curSection ===...") |
m |
||
Line 140: | Line 140: | ||
target: animItem.target, | target: animItem.target, | ||
animationData: animItem.animationData, | animationData: animItem.animationData, | ||
− | assetsPath: | + | assetsPath: "https://static.igem.org/mediawiki/2020/", |
}); | }); | ||
} | } |
Revision as of 18:42, 13 October 2020
let timeout1, timeout2; function switchAnimSubsection(newSection, curAnim) {
let load = (newSection === -1); if (load) newSection = 0;
if (curAnim.curSection === newSection) return; let down = (newSection > curAnim.curSection); curAnim.curSection = newSection;
Array.from(curAnim.bubbleIndex.children).forEach((item, ind)=>{ if (ind <= curAnim.curSection){ item.classList.add("active"); }else{ item.classList.remove("active"); } });
const { bigTitle, title, text, noanim } = curAnim.sections[curAnim.curSection]; if (!load){ clearTimeout(timeout1); clearTimeout(timeout2); curAnim.content.classList.add(down ? "fadeOutDown" : "fadeOutUp"); } timeout1 = setTimeout(()=>{ curAnim.bigTitle.innerText = (bigTitle !== undefined) ? bigTitle : ""; curAnim.title.innerText = (title !== undefined) ? title : ""; curAnim.text.innerHTML = text; if (noanim){ curAnim.content.parentElement.classList.add("contentLarger"); curAnim.content.classList.add("contentLarger"); curAnim.scrollItem.classList.add("contentLarger"); }else{ curAnim.content.parentElement.classList.remove("contentLarger"); curAnim.content.classList.remove("contentLarger"); curAnim.scrollItem.classList.remove("contentLarger"); } curAnim.content.classList.remove("fadeOutDown"); curAnim.content.classList.remove("fadeOutUp"); curAnim.content.classList.add(down ? "fadedInvisibleDown" : "fadedInvisibleUp"); }, 200); timeout2 = setTimeout(()=>{ curAnim.content.classList.remove("fadedInvisibleDown"); curAnim.content.classList.remove("fadedInvisibleUp"); }, 220);
}
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);
animItem.content = crEl("content"); animBlock.appendChild(animItem.content);
animItem.bigTitle = crEl("h2 larger"); animItem.content.appendChild(animItem.bigTitle);
animItem.title = crEl("h3"); animItem.content.appendChild(animItem.title);
animItem.text = document.createElement("p"); animItem.text.className = "content-paragraph"; animItem.content.appendChild(animItem.text);
/*/ 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
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 switchAnimSubsection(i, animItem); anim.goToAndStop(animationProgress * (anim.totalFrames - 1), true); } }); compoundLength += item.length; } const scrollBackPaddingElement = crEl("scrollAnim"); // for end padding animBlock.parentElement.appendChild(scrollBackPaddingElement); // add it to document anim.goToAndStop(animItem.animBegin * (anim.totalFrames - 1), true); } switchAnimSubsection(-1, animItem);
ScrollLottie({ target: animItem.target, animationData: animItem.animationData, assetsPath: "https://static.igem.org/mediawiki/2020/", });
}