Jump to content
Search Community

Paused Timeline create weird issue

Korben Dallas 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

Hello everyone.
 

It's my first post here and i really like this library.

Before talking just note that i'm french and I'll probaly do somme grammar faults.

 

So, my problem is that I've created a Timeline and then paused it (You can look the Codepen).

Then i've created a SetTimeOut to play it after 2s.

When the Timeline play after the pause, the H1 and H2 won't work.

 

Then if we remove the  pause and the settimeout, the H1 and H2 animation will work.

I've worked on it for few hours and it's driving me crazy.
I didn't found any post related to this so i'm asking you a little hand for me!

?

(you maybe need to go to CodePen to scroll and see the h1 and h2 ;).

See the Pen daqxee by Ziratsu (@Ziratsu) on CodePen

Link to comment
Share on other sites

Hi and welcome to the GreenSock forums,

 

Thanks so much for the demo. Very helpful.

 

I don't want to confuse you too much but part of the reason things were weird is the way immediateRender works when a set() is the first thing in a timeline (at a time of 0). the short story is that you have multiple set()s and from() tweens trying to set and record values at the same time and the fact that the timeline is paused adds another level of complexity. Also I don't know if I understand it 100% so I risk confusing us both and there's also a chance this behavior may change in the next version of GSAP. An accurate description may come from @GreenSock

 

However, the good news is that you can get the behavior you want by setting the autoAlpha of the h1 and h2 outside of the timeline.

Take a look here:

 

See the Pen OdBJbj?editors=1010 by GreenSock (@GreenSock) on CodePen

 

I messed with the css a bit just so that things are viewable above the fold.

  • Like 2
Link to comment
Share on other sites

@Enzo Ustariz,

 

You can also simplify everything by making use of the timeline's delay property. Also ... I'm not so sure why you are setting opacity in CSS to the set() autoAlpha to 1 and then tween from() 0. You can remove all of the CSS opacity /visibility values, set those elements to autoAlpha 0 and then tween to() 1 ... here is a CodePen illustrating

 

See the Pen XOxWzv by sgorneau (@sgorneau) on CodePen

 

  • Like 2
Link to comment
Share on other sites

Hello Carl,
Thank's for these informations, i learned some new things.

But in fact I "set" the H1 and H2 values to "opacity:0;" because I don't want them to appear before the animations you know?

 

I've created few projects to train myself with GSAP and if we don't put "opacity:0" in the CSS and then set "autoAlpha:1" in the timeline before the animations,

 

we will see (a little glimpses) of our elements before the animations occurs when we F5 our page.

You know spamming refresh and sometimes you'll see our elements for a little time. (I hope you understand this).

 

So I was aware that I can set my Headings outside of the Timeline, but if I do that, I will see my H1 and H2 if I refresh my page, and I was setting my elements to avoid that.

Link to comment
Share on other sites

Welcome to the forums, @Enzo Ustariz!

 

Yep, as @Carl indicated the problem has to do with immediateRender. By default, set() calls have immediateRender default to true if they're positioned at the very start of a timeline UNLESS that timeline is paused. So that was the key here - when you paused the timeline, it didn't fire off those set() calls immediately. And remember that from() calls always default to immediateRender:true, so those set opacity to 0 initially (even if the timeline was paused). Therefore, they locked in the starting value of 0 since that's what you had set in your CSS. 

 

The upcoming release of GSAP makes the default immediateRender of set() calls false consistently, and it also makes immediateRender false for from() and fromTo() if the timeline is paused. But that doesn't really solve your scenario. I'd recommend being very careful about using from() tweens - not that it's bad but some users don't understand how they work and get caught in the logic. 

 

Also, as @Shaun Gorneau said, your code could be greatly simplified: 

 

See the Pen 33b3bf77dd115c0a4fa8271244d6716c by GreenSock (@GreenSock) on CodePen

 

:)

 

Happy tweening!

 

  • Like 2
Link to comment
Share on other sites

40 minutes ago, Enzo Ustariz said:

Hello Shaun,

I don't want Elements to appear when I refresh the page so I set them to "opacity:0" in the CSS and then set them to "autoAlpha:1" in my timeline before their animations. (you can read my message just above)

 

 

OK, that makes sense. I would apply that CSS to a single element somewhere up the DOM  (generally <body>) and undo it with Javascript within the onload ... like this.

 

See the Pen GzYgbL by sgorneau (@sgorneau) on CodePen

 

A lot less to manage and undo :)

 

Also, @Jack ... now that is simplified!! I hate when I don't think of these things!! ?‍♂️

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