Cassie

Thanks for popping back to let us know!

No worries! Sometimes we can't see the forest for the trees! 🌲🌳

Hey Nick! I haven't watched these tutorials so - paging the man himself @Carl If Carl's busy and doesn't reply I'll take a little look. ☺️

In this case you could just set repeat 5 👀 I also noticed that you're using deprecated syntax. Check out the migration guide. https://greensock.com/3-migration/

No worries pal! Glad to have you onboard Club GreenSock too, hope you're enjoying the learning curve.

Currently you have scrub:true set - so the duration is tied to the scroll speed/progress If you remove that you'll be able to change the duration. Try it out, it's nice and easy to see the difference ☺️

Hi there Rarla, It's impossible to pin down animation issues by just looking at the GSAP code as styling and markup play such a huge part. Could you please make us a minimal demo on codepen or codesandbox? Thanks!

Ok, cool. Glad I asked! So if you'd like to do a reveal on scroll, a basic version would be something like this https://codepen.io/GreenSock/pen/gORdWJm?editors=1010 This will be nice and simple to adjust or add to for your use case. You can change the position parameter to adjust the stagger. Right now it's playing the second tween halfway though the first tween - '<50%' I've adjusted this one too. https://codepen.io/GreenSock/pen/mdwGRJm?editors=0010 Following the structure already set out - I added a 'delay' class to any element that would be delayed. delay: elem.classList.contains("gs_delay") ? 0.3 : 0, Then in the tween params I'm checking for that class in a ternary and adding a delay if the class exists. This is a bit of a convoluted route though so I would recommend starting with the first pen and layering on any behaviour you need rather than starting with a complex solution and trying to wrangle it.

Hi Vlad - I can certainly help you with this. I'm just wondering if this is the best demo to be working on if you're learning. It's a bit of a complex example because it's demo-ing different animations depending on direction. Usually you'd be able to use the position parameter. Just wanted to check in case you're trying to learn about positioning and you've ended up down a rabbit hole you didn't intend to be down? If you'd like to carry on with this demo I'll try to comment it out to make it a little clearer. ☺️

Sure thing! You can just add repeat:-1 to your tween. https://codepen.io/GreenSock/pen/PojdzyB?editors=0010

Great - so taking into account what I've explained so far, you can adjust the start trigger position for the chapter 3 tween. Why don't you give it a go? Feel free to post an updated demo if you try something and it doesn't work.

No need to delete, we all get confused sometimes!

I've provided a few different examples of routes you can take in this pen - so take a look and pick the option that works best for you, whether that's standalone, or included in your timelines.

You don't need to use maths! If you want section 1 to include the static section that's fine. You can define an endTrigger like so - Just tell scrollTrigger where the start and end points are. https://codepen.io/GreenSock/pen/QWgVbxa?editors=0010

Hello tpinne, I've put together a pen with some comments here. https://codepen.io/GreenSock/pen/WNOgbqo?editors=0010 If you want a progress bar that maps to the entire page scroll you'll need to make sure the start and end triggers span the whole page. It's important to also add ease: 'none' to the animation otherwise the progress will be eased and the first part will 'fill up' faster than the end part. If you want the chapters to fill up as those sections are animating you'll need the relevant progress tween to match up to the chapter animation's start and end triggers. You could do this by including the progress tween in the same timeline as that section and making sure it spans the entire duration of that animation. Or by adding the progress tween as a standalone animation with matching trigger start and end points. It would be tidier to loop around all the sections (which I did initially) but then realised your sections all have different start and end points so it won't be that simple! additional note - ScrollTrigger locks in values from initial render (for performance), so you may have noticed your progress bar would go from 0 to 25, then 0 - 50, then 0 -75 and so on. I've got around this by adding immediateRender:false to the tweens and timelines affecting the progress bar, this will allow the progress bar to animate to the new position from the previous position it's been animated to, rather than from the start. I've done the first three in different ways - Why don't you try to add the final section animation in?