GSAP 3.6.1 Timeline Issue

[pietM]

Hi everyone, 

 

Having a weird issue with a simple animation with GSAP 3.6.1. When the animation repeats, the timeline breaks and the text blinks, etc. 

 

Using the same code (with GSAP 3.5.1), there is no issue. 

 

GSAP 3.5.1 version:

See the Pen OJWbVEr by evryali (@evryali) on CodePen

 

 

I don't get the discrepancy. What am I missing? 

I appreciate any help, as always. 

 

GSAP 3.6.1 version:

See the Pen wvgLXOq by evryali (@evryali) on CodePen

[pietM]

Still struggling with this.

How can the same code produce different behaviors between the two versions? 

Thanks for all!

M

[GreenSock]

Hi @pietM. Yes, there was a regression in 3.6.1 that caused this, and it should be resolved in the next release which you can preview at https://assets.codepen.io/16327/gsap-latest-beta.min.js

 

Better? 

 

Your demo seemed odd to me, though - you've got an extra .to() tween that's animating the characters opacity to 1 even though they're already at 1 at that time. I'm curious why you were doing that. If I understand correctly, deleting that part of tl2 resolves the issue as well. 

[pietM]

THANK YOU, Jack! 

 

Yes, the beta .js resolves the issue. Phew! 

As for the extra .to(), it's a very inelegant way to hold the characters at 1 opacity for whatever interval before transitioning out. For me, it makes sense to partition the before/after states into two timelines. Though, I'm sure there is a better, more efficient way to achieve this. 

 

Again, thanks for getting back. 

I really appreciate GSAP and its community. 

 

[GreenSock]

17 hours ago, pietM said:

As for the extra .to(), it's a very inelegant way to hold the characters at 1 opacity for whatever interval before transitioning out. For me, it makes sense to partition the before/after states into two timelines. Though, I'm sure there is a better, more efficient way to achieve this. 

Yeah, you could eliminate that altogether. Just use the position parameter to place the fade-out tween later in the timeline. Your way isn't "wrong" - it's just a bit wasteful and verbose

 

Glad the beta is working well for you. Happy tweening!

[pietM]

Thanks, Jack. 

 

I removed the second timeline altogether, as you suggest. The code is much leaner now and functions perfectly. I will definitely adopt this approach moving forward.  

 

tl1.to(chars, {
    opacity: 0, 
    duration:1, 
    delay:1, 
    ease: "expo.inOut",
},2)

 

Thanks again for taking the time to help out. 

All best, 
M