Can't recreate timeline. Wrong initial values.

[lelukas 0 Likes (Newbie)]

I'm trying to create a transition animation between page changes. The component has to be responsive, so, on resize event I have to recreate my timeline, changing some small parameters.

 

Here's my animation code

this.timeline = gsap.timeline({
	paused: false,
	onReverseComplete: () => {
		this.$refs.container.style.transform = ''
		this.timeline.seek(0).paused(true)
	}
})

this.timeline.from('.mosaic > div', {
          duration,
          [scaleProperty]: 0,
          transformOrigin,
          ease,
          stagger
        })

 

And when I call the method that plays it, I do this:

 

this.timeline.play().eventCallback('onComplete', () => {
        this.$refs.container.style.transform = 'rotate(180deg)'
        next()
      })

Before window resize, the animation works just fine. This is the initial style that gsap applies to the elements.

 

When I resize,  I do:

this.timeline.kill()
this.timeline.invalidate()
this.timeline.clear()

(and Im just overkilling is cause I tried other approaches and they didnt work either. Not that this one is working... That's why I'm here)

 

and then I recreate the from animation (second code block). When I do that, the animation does not shows up anymore. Here's the initial style after resizing

 

 

so, what am I doing wrong?

 

I'm using Vue, here is the full code of my mixin:

 

import { gsap } from 'gsap'
import { CustomEase } from 'gsap/CustomEase'

export default {
  data () {
    return {
      screen: undefined,
      timeline: undefined
    }
  },
  methods: {
    toggleMosaic (next) {
      console.log(this.timeline)
      this.timeline.play().eventCallback('onComplete', () => {
        this.$refs.container.style.transform = 'rotate(180deg)'
        next()
      })
    },
    createMosaicTween (duration, scaleProperty, transformOrigin, stagger) {
      const ease = CustomEase.create('custom', 'M0,0 C0,0 0.00803,0.16343 0.02359,0.26241 0.03528,0.33672 0.04691,0.38481 0.07146,0.45433 0.09102,0.50976 0.10899,0.54758 0.14127,0.59573 0.17603,0.64758 0.20631,0.68035 0.25235,0.72417 0.29499,0.76476 0.32677,0.79094 0.37697,0.82011 0.43466,0.85363 0.47691,0.86948 0.54247,0.89277 0.64558,0.9294 0.70952,0.95093 0.81445,0.97552 0.88353,0.99171 1,1 1,1 ')
      if (!this.timeline) {
        this.timeline = gsap.timeline({ // converteu pra tween
          paused: false,
          onReverseComplete: () => {
            this.$refs.container.style.transform = ''
            this.timeline.seek(0).paused(true)
            this.$root.$emit('transition-dismiss')
          }
        })
      } else {
        this.timeline.kill()
        this.timeline.invalidate()
        this.timeline.clear()
      }
      this.timeline.from('.mosaic > div', {
        duration,
        [scaleProperty]: 0,
        transformOrigin,
        ease,
        stagger
      })
        .set('.mosaic > div', { clear: 'transform' })
    }
  },
  watch: {
    $route () {
      if (this.timeline) this.timeline.reverse()
    }
  }
}

 

And here's is where I call the component method:

 

mounted () {
  this.createMosaicTween(
    0.3,
    this.isLandscapeScreen ? 'scaleX' : 'scaleY',
    this.isLandscapeScreen ? 'center left' : 'center top',
    0.07)

  this.$root.$on('resize', () => {
    this.createMosaicTween(
      0.3,
      this.isLandscapeScreen ? 'scaleX' : 'scaleY',
      this.isLandscapeScreen ? 'center left' : 'center top',
      0.07)
  })
}

[ZachSaucier 7,152 Likes (Superhero)]

Hey lelukas and welcome to the GreenSock forums! 

 

Why use a timeline for this? A tween would be fine. I simplified your setup for the demo but here's the basic approach that I'd use:

See the Pen MWwLQYJ?editors=0010 by GreenSock (@GreenSock) on CodePen

 

If you have multiple animations and need a timeline the same approach works:

See the Pen XWbOZba?editors=0010 by GreenSock (@GreenSock) on CodePen

[lelukas 0 Likes (Newbie)]

Yeah, you're right. Im gonna do it using just a tween. Thanks.