Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

Crowleks

Members
  • Content Count

    6
  • Joined

  • Last visited

Community Reputation

1 Newbie

About Crowleks

  • Rank
    Newbie

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  1. Thank you so much guys it help a lot !!!
  2. Here the CodePen example https://codepen.io/ThatHaru/pen/MWwjBRN 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.
  3. 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') } })
  4. ZachSaucier thank you so much for helpful advice. will read through the documentation
  5. Hi, ZachSaucier. the part where while scrolling the elements are pulling from the bottom of the page and then like pull up tighter to each other and then kind of bounce when you stop scrolling
  6. Hi everyone. Can someone help me with animation like this ? https://miro.medium.com/max/800/1*T7YtwbVBbuhdO5g-FA5zKQ.gif The animation as usually start with delay and t looks wierd :( May be someone can give me advice or example. Thanks.
×