Jump to content
Search Community

Using TimelineLite with frequent addPause, can't figure out what is throwing off my script

connorv test
Moderator Tag

Recommended Posts

It helps if you have the console open to see the output of my 'counter'..

I'd essentially like hitting next to add one to it and previous to subtract one. The goal is to have these be the actual 'pages' on the site, and every time you hit next/previous it will do this little animation to the next/previous set of content.

 

Once the script loads if you click next and then previous (in that exact order) back and forth, you can see that it correctly counts which "page" you're on. The var that's storing this is called 'last' and there's a simple console.log to record what is stored after it's been added or subtracted.

 

But if you hit next twice to get to 3, and then go back to 2 or 1, the count gets thrown off on the next button press. I can't figure out why, I have these adding and subtracting each time just like my first 2. From what I can tell the same GSAP code (function getFirst and function rewindFirst) should be firing once last is set to 2, so I'm really confused on this. I thought it would behave exactly as how my first ones did, because it uses those same values to determine where to essentially go, or maybe I'm misunderstanding how this functions?

 

Sorry for this mess of a post, it's 1AM & I've been battling with this for hours.

See the Pen ExWQzbQ by connorv (@connorv) on CodePen

Link to comment
Share on other sites

Heya!

A little heads up -  you're using an older version of GSAP. We definitely recommend that you learn and use GSAP 3. It's better in every way.


Your approach seems a little convoluted to me. I'd probably keep the tweens and incrementing logic separate. Add or Subtract the page var on click and then control your timeline or tweens based on that number. 

In this example I'm using the number to target a specific block, but you could use the number to skip to a certain point in a timeline too? That may work for your use case.


See the Pen afa5ab6bdc8bbe430f9232747da1ac4c?editors=0011 by cassie-codes (@cassie-codes) on CodePen

  • Like 3
Link to comment
Share on other sites

Hey Cassie, thanks so much for your help!!

 

The way you have this set up is so clever. I've kind of taken what you had and expanded on it so that I can target individual ones too. I'm still quite new to javascript and still struggle with writing inadvertently repetitive code especially with gsap so i'm grateful to see how you've simplified what i had in a much more efficient way. Now i'm wondering if there's a way I can limit how many of these can run, such as forcing them to wait a half second after it's ran before it will fire that array again. I've been trying to implement an if isActive to just return;if one of these 'blocks' is animating and put that in some of animation functions as an attempt to just get it to stop if it's already animating (which still probably wouldn't be perfect) but even that I can't seem to get working.

 

So at this point I already have the functions that will animate previous/next for the button presses.. But the reason I'm having this problem now is that I've tied this to scroll events using the wheeldelta stuff, with the goal of being able to navigate these by scrolling. And wheeldata is very sensitive so now these are firing every time the scroll wheel sends data at all, which is way too frequently for what I need and I'm not sure how to slow it down. I wanted to use scrollTrigger and keep everything within GSAP but for the way this animation works I don't think I can, as I think it uses scrollTop type stuff to measure 'scrolling', which this page doesn't do at all because it's a 100vh x 100vw container with overflow:hidden.

 

I think a simple isActive will do what I need but I'm just missing something whenever I try to use it it seems like nothing happens, no matter what I try to target it with. I'm really banging my head against the wall on this one. You can see what I'm going for on the same CodePen, now updated and try to scroll: 

  • Like 1
Link to comment
Share on other sites

Heya! Great job, this is looking smashing.

 

Just FYI you have references to TimelineMax, TimelineLite AND GSAP in here.

in the docs, make sure you have version 3 toggled - TimelineMax and TimelineLite are references to the older syntax - they're bundled up into one API now.
Screenshot 2021-06-08 at 19.16.34.png


You're right, isActive is what you want - I've added some onComplete calls here in your tweens to toggle a variable.

It should be a step in the right direction.

See the Pen d75d0a47d1f331878f408c3b06b54978?editors=0011 by cassie-codes (@cassie-codes) on CodePen



*edited because I attached the wrong link

 

  • Like 2
Link to comment
Share on other sites

  • 3 weeks later...

Cassie thanks again so much for your help! This little project is turning into something awesome. Here's an updated one where you can check out all the things I've done since, like added touch support, clickable navigation & a few more animations: 

See the Pen PopbvKM by connorv (@connorv) on CodePen

 

It's becoming so cool! But I'm now facing a different issues in my animations - there is a slight "wiggle" when the width are these are animated, you can see it for yourself by scrolling a bit.

 

I've watered this down into a much simpler CodePen where you can see the issue w/o all the fluff here: 

See the Pen BaWXzPX by connorv (@connorv) on CodePen

 

 

So the way this works is I have this colored bar at the bottom that animates when 'next' or 'previous' is clicked, using the array you showed me here. There's one element on the left that always takes 10% of the space, and two others that combined take the rest of the 90%. 

 

When I first saw this happen I was just setting the middle one to always be 100% of the space. I figured this shakiness came from the containers being too big, so it did a bunch of math to try to get them to fit as it was animating. I've attempted to mitigate this by making the size always equal exactly 90% of these two containers - I do this by putting in scripts like this:

if (i == 3) {
      TweenMax.to(".sw4", {
        width: "72%"
      });

where i is just the page number. So this fires when the direction is changed from a specific page - I also will have an inverse script that will set the width of the other element to 18%, so that it always equals an exact 90%.

 

But I still see this shakiness on super specific transitions - like when animating from the first to the second page, but not from the second to the first. I don't know why this happens or where this inconsistency comes from when the math should be the exact same each time, but obviously something is consistently making it shaky on certain animations and not on others.

 

Maybe my approach to this problem is bad? It's almost like the animations aren't firing at the exact time so there's some lag, causing the math to be off for a second but looking at my code I believe these should always fire at the same time. I'm pretty stumped on this - do you have any ideas?

Link to comment
Share on other sites

Heya pal! 

I'm not quite sure what's causing the shakiness but you've got a mix of old GSAP syntax (tweenMax.to) and new GSAP syntax here (gsap.to)

Definitely go through and sort that out!

You're also repeating yourself a lot, that's the cool thing about code, you can let the computer do the hard work for you,

I've commented out a section at the top and rewritten it with a simple stagger.


It's quite hard to read right now so why don't you go through and tighten things up a bit and convert to GSAP3 and then I'll take a good look at it and see what's causing the wobble!

See the Pen ExWqeYo?editors=0010 by GreenSock (@GreenSock) on CodePen

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