Jump to content
Search Community

Timeline replay issue

Learning test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi guys,

 

I'm not sure if anyone has encountered this before, I have the following timeline,
 

this.tl = new TimelineLite()
		this.tl
			.set( '.line-1, .line-2, .line-3, .line-4, .line-5', { autoAlpha: 0 } )
			.fromTo( '.line-1', 2,
				{ autoAlpha: 0, scaleX: 0.9, scaleY: 0.9, x: '-50%', y: '-50%' },
				{ autoAlpha: 1, scaleX: 1, scaleY: 1 }, 0 )
			.to( '.line-1', 1, { autoAlpha: 0 }, 3 )
			.fromTo( '.line-2', 2,
				{ autoAlpha: 0, scaleX: 0.7, scaleY: 0.7, x: '-50%', y: '-50%' },
				{ autoAlpha: 1, scaleX: 1, scaleY: 1 }, 4 )
			.to( '.line-2', 1, { autoAlpha: 0 }, 5 )
			.fromTo( '.line-3', 2,
				{ autoAlpha: 0, scaleX: 0.7, scaleY: 0.7, x: '-50%', y: '-50%' },
				{ autoAlpha: 1, scaleX: 1, scaleY: 1 }, 6 )
			.to( '.line-3', 1, { autoAlpha: 0 }, 7.5 )
			.fromTo( '.line-4', 2,
				{ autoAlpha: 0, scaleX: 0.9, scaleY: 0.9, x: '-50%', y: '-50%', transformOrigin:'50% 0%' },
				{ autoAlpha: 1, scaleX: 1, scaleY: 1 }, 14 )
			.to( '.line-4', 1, { autoAlpha: 0 }, 17 )
			.stop()


So basically it's a simple scale up as opacity becomes 1 kind of animation.
line-1 and line-4 are normal text, which works fine.
line-2 and line-3 are images, which is the problem.
When I use tl.play(0) to restart the timeline, the images don't fade in but appears only when it reaches scale 1. It doesn't fade in as before.
The first round of playing the timeline works, but subsequent replays of the timeline, this issue appears.
Any idea why? This timeline plays in front of an html5 video playing in the background, could that be the issue?

Edit 1:
Been testing and trying all sorts of ways to see what's the issue. It seems that the tween still runs... It's just that the inherit property now reflects as hidden? But nothing changed from the first playthrough to the replay. And the parent is definitely visible. Tried forcing it to be visible when the tween starts, it flips back to inherit still though once the tween plays.

Edit 2:
I guess it's not the inherit's issue... I tried using opacity instead of auto alpha. The tween still seems to be moving but it still only can be visible after the tween is complete. =(

Link to comment
Share on other sites

It is because you are using position parameter and passing absolute values, and because you are animating same elements and their same property, both tweens are causing a conflict.

 

Not really sure what you are trying to do, so you might want to take a look following two tutorials.

 

https://www.youtube.com/watch?v=sXJKg8SUSLI

 

https://www.youtube.com/watch?v=QO1mLs96krY

 

See the Pen qVQLbd?editors=0010 by Sahil89 (@Sahil89) on CodePen

 

  • Like 1
Link to comment
Share on other sites

I do want to use absolute values in my timeline to control where it starts.
But ah! Yes, I finally see the issue... There a tiny overlap in my fade out and fade in of the same element. Alas... That's the issue. =(
Dumb mistake. My bad! Thanks for pointing it out~

  • Like 1
Link to comment
Share on other sites

Yeah, its always best to avoid conflicting tweens that fight for control of the same properties of the same element.

You can add overwrite:"none" to the second tween so that the first tween doesn't get killed and will still play on restart() of the timeline

tl.to(obj, 1, {x:200})
tl.to(obj, 1, {x:0, overwrite:"none"}, 0.5);

 

  • Like 2
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...