AnimateCss // AnimateCss - Layouts/Assets.html function isScrolledIntoView(el) { // check for 5% visible var percentVisible = 0.05; var elemTop = el.getBoundingClientRect().top; var elemBottom = el.getBoundingClientRect().bottom; var elemHeight = el.getBoundingClientRect().height; var overhang = elemHeight * (1 - percentVisible); var isVisible = (elemTop >= -overhang) && (elemBottom <= window.innerHeight + overhang); return isVisible; } function t3sbCssAnimate(ael, dataAnimate, animateRepeat) { // used w/ button or buttonGroup ??? if (ael.nodeName == 'HEADER') { // ael = ael.nextSibling; } if (isScrolledIntoView(ael)) { ael.classList.add('bt_visible', dataAnimate); ael.classList.remove('bt_hidden'); } else { if (animateRepeat) { ael.classList.remove('bt_visible', dataAnimate); ael.classList.add('bt_hidden'); } } window.addEventListener('scroll', function() { if (isScrolledIntoView(ael)) { ael.classList.add('bt_visible', dataAnimate); ael.classList.remove('bt_hidden'); } else { if (animateRepeat) { ael.classList.remove('bt_visible', dataAnimate); ael.classList.add('bt_hidden'); } } }); } // AnimateCss-{data.uid} - Partials/Layouts/Assets.html var animatedElement = document.getElementById('c{data.uid}'), animateRepeat = '{animateCssRepeat}', dataAnimate = '{dataAnimate}', child = animatedElement.firstChild; if ( animatedElement.nodeType == 1 && animatedElement.classList.contains('animated') ) { t3sbCssAnimate(animatedElement, dataAnimate, animateRepeat); } else { if ( child.nodeType == 1 && child.classList.contains('animated') ) { t3sbCssAnimate(child, dataAnimate, animateRepeat); } else { if (child.nodeName == 'HEADER') { t3sbCssAnimate(child.nextSibling, dataAnimate, animateRepeat); } } } // AnimateCss-{data.uid} - Partials/Layouts/Assets.html var animatedElement = document.getElementById('c{data.uid}'), animateRepeat = '{animateCssRepeat}', dataAnimate = '{dataAnimate}'; if (animatedElement) { t3sbCssAnimate(animatedElement, dataAnimate, animateRepeat); } Lightbox - same in News/Detail.html Baguette Box // Baguette Box (lightbox) - Partials/Layouts/Assets.html baguetteBox.run('.gallery, .image-gallery', { animation: 'fadeIn', noScrollbars: true }); Halkabox // halkabox-{data.uid} (lightbox) - Partials/Layouts/Assets.html halkaBox.options({animation: 'fade',theme: 'dark'}); halkaBox.run('gallery-{data.uid}'); G Lightbox // GLightbox (lightbox) - Partials/Layouts/Assets.html const lightbox = GLightbox({loop: true});