Delay/Stagger not working

[MrJL]

Hi. I'm trying to get three letters of a logo to animate in from below sequentially, but I can't get it to work. The header shows successfully once you scroll down, but the letters never get the class added. If anyone can show me where I'm going wrong that would be great. 

See the Pen abQQZjL by mrjonoces (@mrjonoces) on CodePen

[Carl]

Hi,

Thanks for providing a demo.

There are few conflicts and areas of confusion.

 

I'm guessing you are at the stage where you just try a bunch of stuff and none of it quite worked as planned. That's ok, but it makes it kind of hard to figure out the intention.

 

I tried making it work, but unfortunately I can't see any of the SVG artwork. on rare occasion a pink bar shows up and then disappears.

Even after removing the JS It's just a white page. 

 

A few things I noticed

Inside your loop you are creating a single gsap.to() for a single letter.

In this tween you are adding a stagger property but there is nothing to stagger if you're only animating one thing.

Your to() tween isn't tweening any properties so there is no animation to control with your toggle actions of "play pause none none".

All of the ScrollTriggers use the same trigger ".one" so that means all the classes would get applied at the same time and not stagger.

If you want to use toggleClass it would be better to just create a ScrollTrigger that is not attached to a to() tween

 

Suggestions moving forward

• make a fork of the demo you provided.
• make sure all the SVG letters are fully visible.
• animate them with a simple gsap stagger.
• post the updated demo below with a clear description of where you are stuck or what needs to be added.

Once we see the artwork and the animation we can then better advise how to implement ScrollTrigger and get the effect you want.

 

Although it's ok to animate things by adding css classes, at this stage of the game I think it's only adding more confusion and potential for conflicts.

 

 

[mvaneijgen]

I could get something to show, but I had to modify a lot of HTML, CSS and JS to do so. Same as @Carl I have no idea what any of it should do, but it is doing something. 

 

Some notes I've got. Be really careful when mixing transition in css with GSAP and transition: all 1s ease; should never be used! You can target a specific property eg transition: transform 1s ease; but all is a no go! And you're using GSAP, so why animate classes when you can directly animate their properties, much easier and more fun!

 

I've put some notes in your JS to better explain things, so be sure to read through them. For now I've disabled ScrollTrigger, because the best thing to do when working with ScrollTrigger is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in. This way you can focus on one part at a time and it will save a lot of headache when debugging. 

 

I've put one simple animation in your forEach loop that gets put on a timeline, your SVG is structured in a particular way and it will animate the first one it sees (which in your cause is the last item), then the second (which is the first, confuses me to 🙃) and then the third one (the second, is your brain also melting 🫠). It is maybe a good idea to restructure your HTML/SVG to reflect the order you want them to have, before animating, but I'll leave that to you. Hope it helps and happy tweening! 

 

See the Pen RwqqKZB?editors=1010 by mvaneijgen (@mvaneijgen) on CodePen

[MrJL]

Thanks guys. As you quickly figured out I've been hacking around a lot and trying a few different things... and got myself in a pickle in the process.

 

Here's the new codepen that's updated with your advice and suggestions, but the staggering of the letters still isn't working. Sure it'll be an easy fix for you guys who know what you're doing but it's still a mystery to me. 

 

See the Pen mdQQWdg by mrjonoces (@mrjonoces) on CodePen

[Rodrigo]

Hi,

 

You are nesting ScrollTrigger instances in a Timeline child animation. That is something that can't work properly:

https://greensock.com/st-mistakes/#st-in-tl

 

Here is a fork of your codepen:

See the Pen zYMMZpL by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps.

Happy Tweening!

[MrJL]

Thanks Rodrigo that's working perfectly. I'll have a read through the mistakes link now!