Sam Smyth

Definitely much cleaner! Unfortunately, I'm planning to add a set of buttons to optionally navigate through the slides as well, so I think I may need a counter or something similar. But as I'm sure you can tell, my JavaScript is not great by any means, so who knows! Thanks a lot for your help on this

Thanks, @Rodrigo. That's what I'm after and it's a smart way of doing it! It makes me think... It looks like with functions, I'm basically having to calculate the full duration of the previous timeline, whereas when using normal timelines in a master timeline, the relative positioning nicely starts the next timeline relative to the end of the one before. It calculates the previous timeline's duration for me. Here's an example comparing the two, with the fix commented out at the bottom: https://codepen.io/ssmyth93/pen/JjvxarZ It just makes creating more complex timelines with tweens that have varying durations a bit more cumbersome. So, my question is, when I'm using timelines in functions like this, do I just have to manually account for the duration of the prior timeline? Whether that's through some variables outside of the function or by just manually counting the time and adding it to the position. Or is there an easier way? Such as creating a variable for the whole timeline duration - something like: var tlDuration = myTimeline.duration();

I think I see the issue here. Within a timeline, I can't position a function relative to another function. So, it's better to have the "reset" and "display" as timelines rather than wrapped in functions and reference those individual timelines in the master timeline rather than referencing the functions. I've updated the Codepen, but now I have one final issue. The counter is working as expected, but the currentSlide = slides[count];does not update the variable since the variable is no longer within a function that is being called in the master timeline. How do I get around that? https://codepen.io/ssmyth93/pen/XWqOYeG

Thanks, @Rodrigo. That makes sense, but it still looks like the position of that "reset" function is not functioning as I'd like. I want it to trigger the "reset" function two seconds after the "display" function finishes, but currently it's just starting two seconds after the start of the whole master timeline. In your pen, you changed the default duration on the currentSlideTl timeline to 0.5, whereas in my pen it was 3. So what should happen is that the currentSlideTl timeline in the "display" function should take three seconds, then the allSlideTl timeline in the "reset" function should start two seconds after the currentSlideTl functions. To clarify: currentSlideTl: takes 3 seconds to run. allSlideTl: starts 2 seconds after currentSlideTl, so in this case, at 5 seconds into the master timeline. https://codepen.io/ssmyth93/pen/VwxgXbM

I'm having some difficulty understanding how to position nested timelines. I'm following the code here in the "Nesting" section: https://greensock.com/docs/v3/GSAP/Timeline but I'm running into an issue. When I write my "master" timeline with parentheses like it is shown in the documentation code, positioning works, but it doesn't actually re-run my functions on the repeat. When written like so: let slideRotator = gsap.timeline({repeat: -1, repeatDelay: 1}); slideRotator .add(display()) .add(reset(), "+=2") .add(counter()) The "reset" function runs two seconds after the "display" function finishes. The issue is that it's not running through these functions again, so my counter isn't increasing, amongst other issues. When written like this, without parentheses, it does re-run the functions, but timeline positioning no longer works as expected, instead running the "reset" function two seconds from the very start of that master timeline: let slideRotator = gsap.timeline({repeat: -1, repeatDelay: 1}); slideRotator .add(display) .add(reset, "+=2") .add(counter) What's the difference here? Maybe I'm going about it wrong. In my Codepen, you can see that I'm trying to create a simple transitioning slide deck. Each text element should have the same animation, running through the first, then second, then third, then back to the first. It's pretty close except the positioning on that timeline messes up the timing. How do I get that "reset" function to run two seconds after the "display" function instead of two seconds after the start of the timeline? Thank you!

Thanks for the help, you two! I played around with it using your advice and it looks like I have it. Unless there are any issues with my code here that I'm unaware of, I believe I have my answer. https://codepen.io/ssmyth93/pen/mdpPPLX

Bear with me - new to GSAP and I think I'm missing something simple. I am trying to ensure that this fixed box in the top right corner is always white when the menu is open. I'm able to do this, but I've added scrolltrigger to change the box to black when it reaches below the banner. This causes problems when you scroll past the banner and try to open and close the banner. What I have is somewhat close. To summarize what I would like to do: When menu is closed, box is white when above the banner and black when below the banner. When menu is open, box is white regardless of where you are on the page. When you close the banner, the box always returns to the correct colour (white when above the banner, black when below the banner) I really appreciate the help!

Thanks for the tip, @OSUblake! Totally understandable about it being out of the scope. It does help and gives me some more ideas. Unfortunately, I believe the something is being run after the window has finished loading.

I'm having an issue where my GSAP script seems to be loading in earlier than it should. This causes issues where the triggers don't line up properly. I wish I could create a minimal for this, but it's not that kind of issue - I appreciate any help but understand if it's out of the scope of this forum. I'm having to use an unfortunately bulky WordPress theme that loads in a lot of files. I believe one or more of these files are moving elements around after my GSAP script loads. I saw this comment that shows how to load my scripts after the DOM and window are loaded. I believe the files in my case are loading asynchronously/after the window loads, so I still have a problem. If I use a setTimeout function and delay my GSAP code a few seconds, the triggers line up, which is why I believe this is the problem. Is this a common problem? How do I ensure that my code runs after elements have stopped moving around? Delaying my code from loading for a few seconds doesn't seem like a good way to do this. It is difficult to replicate this problem as it weirdly doesn't seem to happen every time, but if you navigate to different pages and then back to the home page, you will likely see the issue. Especially in a private browser. I've also attached an image - the left image side is working properly, the right is where the triggers are pushed down the page. My code for this piece is simple: let text = gsap.utils.toArray('.animation p, .animation h3, .animation h4, .animation h5, .animation h6'); text.forEach(blocks => { gsap.from(blocks, { scrollTrigger: { trigger: blocks, start: "top 90%", markers: true }, y: 50, autoAlpha: 0 }) }) Here is the test site, with markers on: http://staerkhair.shapedesign.ca/ Thank you!

@GreenSock That is exactly what I am looking for! I never would have thought of that, so I really appreciate the help. Cheers!

Hmm, that's close to what I'm looking for, but it still shoots down the page as you scroll rather than staying pinned to the center of the viewport. It's almost like it starts animating a little bit late and has to catch up. I'm looking to have it work just like Jack's example but have the "Test" text start a little bit down into the element rather than at the top. Any way I can do that?

That's right! Thank you! One last thing - how do I offset that text down a bit so it's not right at the top of the element? I tried a few ways (like simply adding margin), but it messes with the pinning position once scrolled down: https://codepen.io/ssmyth93/pen/poPBWRr

Hi - I'm very new to GSAP, so I may be going about this issue incorrectly. Here's my goal: When a user scrolls down and the "Test" text meets the middle of the viewport, this "Test" text should stay pinned in the middle of the viewport until it reaches the middle of the ".second" element When the text reaches the middle of the ".second" element, I want the text to stay in the middle of the ".second" element as the ".second" element is pinned to the viewport. The codepen is as close as I can get to what I want, but there are a few issues: The text jumps down to the middle of the ".second" element and oddly moves left when it should get pinned to the middle of the viewport and scroll nicely. I need to be able to have the text start a little bit down from the top of the ".second" element. Similar to how you would add some padding if there was no animation. If you comment out the first half of my JS, you'll see that it works correctly besides the ".second" element not getting pinned (or having any padding) when it reaches the top of the viewport. Using this on my project, I'm running an animation timeline in the center of the ".second" element, but I don't want a large amount of empty space in the top half of this element as the user scrolls down until the ".second" element meets the top of the viewport (since the element is 100vh, there's a lot of empty space) - I want the user to see the text fairly near the element above so they don't think it's the end of the page. Hopefully this makes sense! Thanks so much.