Jump to content
Search Community

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

0li 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

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

Link to comment
Share on other sites

If I understand your goal correctly, you can use some conditional logic, like: 

function createTl2() {
  var tl = new TimelineLite();
  tl.from('#headline', 3, {opacity:0});
  return tl;
}
function buildIntro(showHeadlineImmediately) {
  var tl = new TimelineLite();
  tl.from('#someContent', 1.5, { opacity: 0, ease: Sine.easeOut })
    .staggerFrom('.otherContent', 1, { opacity: 0, x: 1000, ease: Back.easeOut.config(1) }, 0.4)
    .add(createTl2(), "headline");
  if (showHeadlineImmediately) {
    tl.seek("headline");
  }
  //if you prefer to still play all the previous animation (rather than skipping it), replace the entire previous if() statement with the next line...
  //.add(createTl2(), showHeadlineImmediately ? 0 : "+=0");
  return tl;
}
//pass in true if you want the headline to show immediately, false if not.
var intro = buildIntro(true);
document.getElementById('button').addEventListener('click', function(){
  intro.restart();
});

 

Here's a forked codepen: 

See the Pen 01a281570a41deaf940749d6c9df9a71 by GreenSock (@GreenSock) on CodePen

 

Notice that all you need to do is change one boolean value to alter the behavior. buildIntro(true) or buildIntro(false). 

 

Does that help? 

  • Like 3
Link to comment
Share on other sites

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.

  • 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.
×
×
  • Create New...