Jump to content
Search Community

Timeline is not being played

Shehzad Asif test
Moderator Tag

Go to solution Solved by Carl,

Recommended Posts

Hi there

 

Can anyone help to me to understand and solve the issue why my timeline is not being played. What I am trying to achieve is the effect of numbers like countdown stacking over and I want to see one number at a time. I think my timeline is setup correctly (may be missing something). But I want to know why my timeline is not playing and what is the missing part to get this effect.

 

I really appreciate the support of you guys.

 

Regards,

Shehzad Asif

See the Pen wvzPExL by ShehzadAsif (@ShehzadAsif) on CodePen

Link to comment
Share on other sites

  • Solution

Hi Shehzad,

 

Thanks for the demo. For something like this I would remove the ScrollTrigger code entirely and make sure the timeline plays fine on it's own.

 

If you do that you will see that your timeline doesn't play.

 

The reason for this is because you do not have any animation in your timeline. You are only putting a bunch of set() calls in the timeline.

 

A set() is literally a tween with 0 seconds as the duration.

 

Since there is no duration to each set(), each set() gets added at a time of zero and your timeline has a duration of 0 seconds.

 

You can verify this with

 

console.log(numTl.duration())

 

I would suggest you create tweens with durations or use the position parameter to offset the insertion of your sets.

 

For a simple counter I would strongly recommend this approach

 

Demo

 

See the Pen NWRGwYQ by snorkltv (@snorkltv) on CodePen

 

If you want to stick with your approach, it's probably worth building a loop to reveal and hide each div instead hand-coding a set() each time you want to change the opacity. This approach is described in Create Dynamic Text Effect with GSAP. You don't need to dynamically create the divs as the tutorial shows in order to use a loop for the animation that shows and hides each one.

 

 

 

 

  • Like 3
Link to comment
Share on other sites

Hey @Shehzad

 

Besides all those great recommendations of @Carl, here are some notes on your approach:

 

In your timeline you are using .set() for each of your tweens - those are basically 0 duration tweens, that you won't ever see, since you are first setting opacity to 1 and then to 0 immediately afterwards again. What you proabably want to use are .to() tweens.

 

Yo are setting the repeat: -1 in the defaults of your timeline for each tween - which doesn't make that much sense. What you probably want is to set the repeat: -1 on the timeline itself.

 

Also, instead of setting the opacity of all h1s to 0 in your timeline initially, I would probably just do it in a seperate .set() beforehand.

 

Since your timeline is supposed to run infinitely, you probably should make use of toggleActions on your ScrollTrigger, to control what happens with the tween. In this demo I just set the enter to restart, so it wil always fire from the beginning when passing that trigger of yours.

 

 

And one last note:

I set the default-duration of your tweens to 1.0 instead of 0.1 because that sort of fast fading in and out of elements could cause seizures with some people.

 

 

Here is a working example of your setup

 

See the Pen bb3951b13e9ef6f500c17e19c3f33932 by akapowl (@akapowl) on CodePen

 

 

Hope this helps.

 

Cheers,

Paul

  • Like 4
Link to comment
Share on other sites

Hi Carl Sir,

 

Thanks and Glad to receive a solution from you being your student. Actually the thing I am trying to implement are not numeric values but with the help of your above examples and from one of your "GSAP 3 Express" course's lecture, now figured out the solution to achieve the continuous stacking effect.

 

Apart from that, I am curious to understand that when I mentioned the duration in defaults of timeline then why it was not reflecting on the .set timelines.

 

Regards,

Shehzad Asif 

Link to comment
Share on other sites

Hi Pawl

 

Great advices and suggestions are always welcome. Well, the reason I am doing the fading so fast because I do not want to see the fading effect instead just wanted to change the number like suddenly getting visible without showing any fading (just like the stacking images effect where images are just stacking over each other with 1 opacity). Ah, special thanks regarding the "seizures" due to fast fading effect (now I may drop/ alter this effect due to that kind of effect or prompt the visitor before showing the page). I was not aware of that, Insha Allah, will keep in mind for the rest of my life.

 

Regards,

Shehzad Asif

Link to comment
Share on other sites

Hi Shehzad,

 

So glad you found a solution and better understanding from the solutions presented here and the course.

 

When you put a duration in the defaults it will apply to every tween. But the engine properly ignores that for set() which will always have a duration of 0. 

This is proper because you could want every tween in a timeline to have a default duration and  still be able to use a set() with a 0 duration.

A set() has a very specific purpose: to apply values instantly.

If you want to have a default duration, use to() or from() tweens

 

hopefully this clears things up.

 

Good luck on your project!

Carl

 

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