Hello all.We use ScrollMagic with GS to animate many objects on the page. Initial animation that animates all objects together affects performance and is glitchy. We've found solution to initiate animation partly on page load and then with scrolling page down to initiate animation for the remaining objects. When you scroll back to top and skip trigger point we remove animation.Everything works fine at the first time but when you scroll down again and we initiate animation again the property "translate" stucks and objects are not moving anymore.Here is the code to initiate all this process:
const testController = new ScrollMagic.Controller()
let testController2 = null
let toggleFlag = false
let initFlag = false
const animatedElements = Array.from(document.querySelectorAll('.test-fade-in'))
const staticAnimatedElements = []
const toggleAnimatedElements = []
const toggleScenes = []
const toggleTweens = []
animatedElements.forEach(element => {
if (!toggleFlag && element.classList.contains('js-animation-toggle-point')) {
toggleFlag = true
}
if (toggleFlag) {
toggleAnimatedElements.push(element)
} else {
staticAnimatedElements.push(element)
}
})
console.log({ staticAnimatedElements, toggleAnimatedElements })
staticAnimatedElements.forEach(element => {
const tween = TweenMax.from(element, 0.5, {
autoAlpha: 0,
visibility: 'hidden',
opacity: '0',
y: '+=200',
ease: Linear.easeNone,
force3D: true
})
new ScrollMagic.Scene({
triggerElement: element
})
.setTween(tween)
.addTo(testController)
})
window.initToggleAnimations = () => {
if (!initFlag) {
testController2 = new ScrollMagic.Controller()
toggleAnimatedElements.forEach(element => {
const tween = TweenMax.from(element, 0.5, {
autoAlpha: 0,
visibility: 'hidden',
opacity: 0,
y: 200,
ease: Linear.easeNone,
force3D: true
})
const scene = new ScrollMagic.Scene({
triggerElement: element
})
.setTween(tween)
.addTo(testController2)
toggleTweens.push(tween)
toggleScenes.push(scene)
})
initFlag = true
}
}
window.destroyToggleAnimations = () => {
if (initFlag && testController2) {
testController2.destroy(true)
toggleScenes.forEach(scene => {
scene.destroy(true)
})
toggleScenes.splice(0, toggleScenes.length)
toggleTweens.forEach(tween => {
tween.kill()
})
toggleTweens.splice(0, toggleTweens.length)
toggleAnimatedElements.forEach(element => {
element.setAttribute('style', 'transform3d(0, 0, 0); opacity: 1;')
})
initFlag = false
}
}
window.getScrollPosition = () => {
return window.pageYOffset ||
(
document.documentElement ||
document.body.parentNode ||
document.body
).scrollTop
}
window.addEventListener('scroll', () => {
if (window.getScrollPosition() > 4200) {
window.initToggleAnimations()
console.log('init')
} else {
window.destroyToggleAnimations()
console.log('destroy')
}
})
