[Play tween either at sequence end OR BEFORE, based on event]

Thanks Jack, that helped a lot!

 

I realize in this case the only thing I need to do is to jump start the sequence at the headline animation using a label and seek(), if the URL is loaded with hash to jump to the headline instantly. I was not digging into controlling playback of timelines yet, that's why I didn't think of seek().

 

Furthermore your explanation shows how to change the position of a tween within a timeline dynamically. That might also be very helpful in the future.

[Play tween either at sequence end OR BEFORE, based on event]

Hi,

 

on page load I start an animation sequence. At the end of this sequence I'm fading in a headline which may be below the fold on some clients. Now when the user loads the URL with a specific hash to jump instantly to this headline position he won't be able to see the headline until the sequence above the fold (which he can't see now) is finished. -> Bad user experience.

 

What I was trying is to instantly start the headline animation if the URL is loaded with this hash, otherwise start it at sequenced position.

 

What I've accomplished so far, thanks to this post, is that I can play this tween (headline fade in) in both cases, at the end of the sequence and via another event. However it is not possible to play the tween BEFORE it has been played at the end of the sequence. After that I can play the tween again as much as I want, but in this case I need to play it instantly on load (and not play it again at sequence end). See CodePen example and try to fade in the headline before the sequence ends.

 

 

See the Pen VWGwRP by 0li (@0li) on CodePen

[Greensock and .from tweens not loading properly]

 

Hi, I have a similar problem but your solution is problematic.

 

On 11.11.2014 at 9:00 PM, Carl said:

There are a few ways to get around this, the most common is just to tell the div that contains your animation to have css like

#banner {
 visibility:hidden;
}

then, when your javascript and tweens start getting created add this script

TweenLite.set("#banner", {visibility:"visible"});

This has the effect of saying, "everything will be hidden as soon as the DOM is loaded and rendered and when the JavaScript first runs, we will reveal everything where it should be".

 

If I use such an approach and the user has JS deactivated he will never see the content because visibility stays hidden.

 

When JS is enabled I want to fade in elements (e.g. opacity 0 to 1), without showing them before. If JS is disabled it should just show the content without animation.

 

Is there any solution for that?

 

And what are the other "few ways to get around this"?