Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Mr Pablo

Timeline onStart & onComplete issues

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

See the Pen BAliD by mr_pablo (@mr_pablo) on CodePen

 

Can anyone explain to me why the image in this 'pen animates OK, then stays hidden? The onStart() function is telling it to be visible, but after one play, it stops working, but the function is being fired!

Link to comment
Share on other sites

Hello .. it looks like you were adding a set() method to the timeline via the add() method:

 

you had this:

timeline1.add(TweenMax.set($("#logo"), { backgroundImage: "url(http://s.cdpn.io/16327/logo_black.jpg)", height: "60px", width: "60px", position: "absolute", x: 0, y: 200, visibility: "hidden" }));

...

if you remove the encapsulated add() method

TweenMax.set($("#logo"), { backgroundImage: "url(http://s.cdpn.io/16327/logo_black.jpg)", height: "60px", width: "60px", position: "absolute", x: 0, y: 200, visibility: "hidden" });

and/or doing this:

timeline1.set($("#logo"), { backgroundImage: "url(http://s.cdpn.io/16327/logo_black.jpg)", height: "60px", width: "60px", position: "absolute", x: 0, y: 200, visibility: "hidden" });

try that out...

 

Working Example:

See the Pen yhtHr by jonathan (@jonathan) on CodePen

 

also instead of using just visibility hidden or visible.. have you looked into the autoAlpha property?

  • autoAlpha - the same thing as "opacity" except that when the value hits "0", the "visibility" property will be set to "hidden" in order to improve browser rendering performance and prevent clicks/interactivity on the target. When the value is anything other than 0, "visibility" will be set to "inherit". We don't set it to "visible" in order to honor inheritance (imagine the parent element is hidden - setting the child to visible explicitly would cause it to appear when that's probably not what was intended). And for convenience, if the element's visibility is initially set to "hidden" and opacity is 1, it will assume opacity should also start at 0. This makes it simple to start things out on your page as invisible (set your css visibility:hidden) and then fade them in whenever you want.
//fade out and set visibility:hidden
TweenLite.to(element, 2, {autoAlpha:0});
 
//in 2 seconds, fade back in with visibility:visible
TweenLite.to(element, 2, {autoAlpha:1, delay:2});

its a great way to show and hide elements.. its part of the CSSPlugin:

 

http://api.greensock.com/js/com/greensock/plugins/CSSPlugin.html

 

hope this helps :)

Link to comment
Share on other sites

That seems to work!

 

I have followed the documentation, but it seems to lack little tidbits like this!

 

Now the issue is I can't get the assets to hide (autoalpha: 0) when using onComplete() on my main timeline, because I guess it is set to loop forever (which i want)

 

I tried onRepeat() but it was glitching and assets stayed hidden...

 

EDIT - 

See the Pen xvfkK by mr_pablo (@mr_pablo) on CodePen

 this is my 'pen. Implemented you change, but as you can see, when using a loop (which i need to be able to use, for dynamic content) the assets stay hidden after the first play through.

Link to comment
Share on other sites

check out this other codepen example using autoAlpha

See the Pen FqtCk by jonathan (@jonathan) on CodePen

 

It looks like in your setVisibile() function you had a Tween to() method animating visibility visible and also a jQuery css() method setting visibility visible. You can just comment out the jQuery css() method, since you are already tweening that element.

Link to comment
Share on other sites

The image stays hidden because Timeline1 has an onStart that sets the visibility to visible BUT the first tween in the timeline is a set() which immediately sets the visibility to hidden.

 

timeline1.add(TweenMax.set($("#logo"), { backgroundImage: "url(http://s.cdpn.io/16327/logo_black.jpg)", height: "60px", width: "60px", position: "absolute", x: 0, y: 200, visibility: "hidden" }));

 

order of operations AFTER the first play is:

 

timeline onStart fires

then the first .set() fires

 

Every time the timeline re-plays the timeline's onComplete hides the logo, the onStart reveals the logo, and the first set() hides it again instantly.

 

--

 

Its tricky why it works the first time, but the general idea is that the set() is a tween with 0 duration. Since there is no duration, it completes as soon as it is created (it has no idea it is being inserted into a timeline). So basically the first set() runs BEFORE the timeline even has a chance to run the onStart.

 

If you set the .set() to use immediateRender:false it will make sure the set() doesn't run until after the timeline begins BUT then you will never see the logo animate as you will be setting the visibility of logo to hidden as soon as the animation starts. 

 

I really don't think you need this litany of onStart, onComplete and set() routines to toggle the visibility of your elements.

 

for instance, at the end of your timeline you can hide all the assets using:

timeline1.set(assets, {visibility:"hidden"})
  • Like 2
Link to comment
Share on other sites

check out this other codepen example using autoAlpha

 

See the Pen FqtCk by jonathan (@jonathan) on CodePen

 

It looks like in your setVisibile() function you had a Tween to() method animating visibility visible and also a jQuery css() method setting visibility visible. You can just comment out the jQuery css() method, since you are already tweening that element.

Ah yes, that css(0 method was in there by mistake, please take a look at the pen linked in my edit. It doesn't use autoAlpha but shows my problem.

Link to comment
Share on other sites

I hate to confuse things, but here is my simplified approach:

 

http://codepen.io/GreenSock/pen/IikEz

 

Not 100% sure its what you are after.

 

I added a 1-second repeatDelay so you can see the element being hidden between plays

Link to comment
Share on other sites

 

The image stays hidden because Timeline1 has an onStart that sets the visibility to visible BUT the first tween in the timeline is a set() which immediately sets the visibility to hidden.

 

timeline1.add(TweenMax.set($("#logo"), { backgroundImage: "url(http://s.cdpn.io/16327/logo_black.jpg)", height: "60px", width: "60px", position: "absolute", x: 0, y: 200, visibility: "hidden" }));

 

order of operations AFTER the first play is:

 

timeline onStart fires

then the first .set() fires

 

Every time the timeline re-plays the timeline's onComplete hides the logo, the onStart reveals the logo, and the first set() hides it again instantly.

 

--

 

Its tricky why it works the first time, but the general idea is that the set() is a tween with 0 duration. Since there is no duration, it completes as soon as it is created (it has no idea it is being inserted into a timeline). So basically the first set() runs BEFORE the timeline even has a chance to run the onStart.

 

If you set the .set() to use immediateRender:false it will make sure the set() doesn't run until after the timeline begins BUT then you will never see the logo animate as you will be setting the visibility of logo to hidden as soon as the animation starts. 

 

I really don't think you need this litany of onStart, onComplete and set() routines to toggle the visibility of your elements.

 

for instance, at the end of your timeline you can hide all the assets using:

timeline1.set(assets, {visibility:"hidden"})

 

Aha, this make sense! :D

 

Question - If I use something like "timeline.set(assets, { visibility: "hidden" });" how do i then make the assets visible?

 

See the Pen xvfkK by mr_pablo (@mr_pablo) on CodePen

 shows my current working code (minus the visibility stuff haha)

Link to comment
Share on other sites

I hate to confuse things, but here is my simplified approach:

 

See the Pen IikEz by GreenSock (@GreenSock) on CodePen

 

Not 100% sure its what you are after.

 

I added a 1-second repeatDelay so you can see the element being hidden between plays

This is very close to what I need, but when I try with my $.each() loops, I am not getting consistent visible/hidden states.

 

See the Pen xvfkK by mr_pablo (@mr_pablo) on CodePen

 shows my current working

Link to comment
Share on other sites

Yeah thats because both timelines are hiding and showing all assets.

When the first timeline finishes on drifter it also hides cape.

 

take a look at this: http://codepen.io/GreenSock/pen/fasFw

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