innocean_dev

Appending Sequences from Conditional Statements to the Timeline Object

Recommended Posts

**See Codepen URL**

I'm trying to create a simple sequence that fades out "Test" after 4 seconds, and then fade out "Rest" after 2 seconds. "Best" will remain. When I append outside of the "if" statement, the sequence works—but inside of the statement—it does not register. I am able to detect as existing all of the elements (div, array, timeline object, etc) in the statement with the console log. It appears though that appending a sequence from an embedded "if" statement will not work. It has to be done on the root level with the Timeline object. Is this correct? Or is there a way to make this work with my current setup? (I've added notations to the code.) Thanks!

Share this post


Link to post
Share on other sites

I'll be honest .. there is A LOT going on in that CodePen and it's tough to really get a sense of what you want. But, in basic logical terms ... it sounds like you want an array like this

 

myString = ["Jest", "Crest", "Test", "", "Rest", "", "", "Best", "", "", "", "Fest"];

 

To be iterated over, where each value is worth 2 ... and if an empty string is encountered, its value of 2 is added to the first backward-looking non-empty string.

 

Such that you could end up with these two arrays for strings and timing,

 

/// After being processed

myString = ["Jest", "Crest", "Test", "Rest", "Best", "Fest"];

myTiming = [2, 2, 4, 6, 8, 2];

 

 

Here is how I would do it

 

 

  • Like 2
  • Thanks 1

Share this post


Link to post
Share on other sites

Wow. Shaun… I am truly impressed. Thanks! This is exactly what I was looking for. I was worried that my aim would not be fully understood, but you got it down solid. Thanks again. I will look through the code to understand your process at arriving with this solution.

  • Like 1

Share this post


Link to post
Share on other sites

Well then ... happy I could help! Feel free to fire away with any questions as I modified the code quite a bit.

  • Like 2

Share this post


Link to post
Share on other sites

Ok. Thanks! I do have a question. It might add a bit of complexity. Not sure. So I'm hoping to have all of the blocks (except the first) start of with 0 opacity—and after the first block fades off, the next fades in—until it gets to the last block (which will not fade out). The reason for is that in the final application, these blocks will be absolute position (stacked on one another), and it will just be text (no blue background). Kinda like one headline fading out and one fading in. Is there a simple solution to this that integrates with the logic you have already provided?

Share this post


Link to post
Share on other sites

No too complex at all ... just an additional .set() and .to()! That's it :)

 

Have a look at lines 38 and 39 40 and 41. One note, I also added a 1 second delay to the timeline itself for a softer intro (line 5).

 

Edit: I added a class of "hide" to <div id="headlines"> ... and then a function to the timeline to remove that class (line 31) to stop the flash of all on then all off.

 

And lines 42-44 to keep the last headline on screen (no tweening to autoAlpha 0)

 

 

 

  • Like 2
  • Thanks 1

Share this post


Link to post
Share on other sites

Great! I'm serious—this really made my day. I love the methods and solutions you came up with and appreciate it much!

  • Like 2

Share this post


Link to post
Share on other sites

Happy to help! Good luck with the project!

  • Like 2

Share this post


Link to post
Share on other sites

Hi Shaun,

I'm here again. I was attempting to resolve the animation to the end using "headlines_tl.progress(1, false)," but it didn't work. Since this timeline was generated in a sort of dynamic way, is there a different approach I should be utilizing in order to pause it?

Share this post


Link to post
Share on other sites

headlines_tl.progress(1,false) will certainly push the playhead to the end of the tween while supressing events ... is that what you're looking to do? To pause the Timeline, you can always use headlines_tl.progress.pause() ... but I'm not sure if you want to jump to the end, or pause it 🤔

 

What is your overall goal?

  • Like 2
  • Thanks 1

Share this post


Link to post
Share on other sites

Hi Shaun, it was to jump to the end. I ended up figuring it out with the help of another GSAP rep. I don't know why, but when I checked back on this thread yesterday and today, I didn't see your reply. But you actually replied on Monday. Not sure why that was. But the other GSAP rep told me you replied and now it popped up. Lol. Anyhow, thanks for looking into and for your help with this. Looks like its good to go. ;-)

Share this post


Link to post
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.