[How to pause Timeline]

I have a timeline which looks like this below

 

this.tl = new TimelineMax({paused: true})    
        
this.tl.to(this.images[this.count], this.duration, { y: '0%', force3D: true, ease: new Ease(BezierEasing(1, 0.055, 0.015, 0.985))})    
this.tl.to(this.images[this.count], this.duration, { y: '-100%', force3D: true, delay: 1, ease: new Ease(BezierEasing(1, 0.055, 0.015, 0.985)),clearProps: 'y'})     

this.tl.restart()

 

What i'm trying to achieve is to pause all animation that happens on this timeline, and any animation that is currently running on this "this.tl" timeline.

 

I have tried to use

 

this.tl.pause()

   

This pauses the animation, however if there is an animation already running it doesn't pause that.   Is there a pauseAll for the timeline?

 

I know I can use this code below, but I do not want to use it because this pauses all globally and it affects my other tweens.

TweenMax.pauseAll()

 

 

[Using TweenMax.from (autoAlpha:0) shows a brief flash of the content]

Thanks guy! That was the problem.  I didn't have visibility :hidden on the css. 

[Using TweenMax.from (autoAlpha:0) shows a brief flash of the content]

On my site, I am using a plugin inView, which calls a function when an element has come into view in the page.

 

There is a div in the middle of the page, and i'd like to use this to fade in it and come from the bottom 

TweenMax.from(element, 1.5, { autoAlpha: 0, y: 100, ease:Expo.easeOut })

 

The thing is it works, however if I quickly scroll down to this div, I'll see it for a millisecond, a quick flash....and then the effect starts.

 

I tried to use the .set function and set it to autoAlpha: 0...however now it doesn't even fade in at all.

 

Is there a solution to this problem? I'd like to use .from, however I do not want to see it flash quickly on the page before it starts the animation.