[Translate properties not change]

Thank you so much guys it help a lot !!!

[Translate properties not change]

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.

[Translate properties not change]

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')
  }
})

 

 

[Easing move content with scrolling]

ZachSaucier thank you so much for helpful advice. will read through the documentation

[Easing move content with scrolling]

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

[Easing move content with scrolling]

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.