Jump to content
Search Community

Translate properties not change

Crowleks test
Moderator Tag

Recommended Posts

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

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...