Crowleks Posted February 20, 2020 Share Posted February 20, 2020 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') } }) Link to comment Share on other sites More sharing options...
ZachSaucier Posted February 20, 2020 Share Posted February 20, 2020 Hey Crowleks and welcome! ScrollMagic isn't a GreenSock product and we don't support it here so it's hard for us to wade through ScrollMagic code. Can you please try to boil down the issue to the most minimal that it can be and create a CodePen displaying the issue? You're much more likely to get a helpful response if you do so. Link to comment Share on other sites More sharing options...
Crowleks Posted February 20, 2020 Author Share Posted February 20, 2020 Here the CodePen example See the Pen MWwjBRN by ThatHaru (@ThatHaru) on CodePen To reproduce issue: 1. Scroll down to the end 2. Then scroll back to top 3. Try to scroll down again You should see that block now just blink and not animated fully. Link to comment Share on other sites More sharing options...
gmullinix Posted February 20, 2020 Share Posted February 20, 2020 I changed your "from" tween to a "fromTo" and it appears to animate as desired. Also, autoalpha automatically sets the "visibility" and "opacity" properties so no need to specify it in the tween. See the Pen PoqGdyv by gem0303 (@gem0303) on CodePen 2 Link to comment Share on other sites More sharing options...
ZachSaucier Posted February 20, 2020 Share Posted February 20, 2020 I'd just use an intersection observer for this: See the Pen LYVRgpg?editors=0010 by GreenSock (@GreenSock) on CodePen 3 Link to comment Share on other sites More sharing options...
Crowleks Posted February 20, 2020 Author Share Posted February 20, 2020 Thank you so much guys it help a lot !!! 1 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now