Acccent

While I understand that this isn't technically something that SplitText does, it does mean that in effect, SplitText doesn't support languages that rely on ligatures. Is that right? I get that it would be way too much work for the GSAP team to ensure full compatibility with all the possible variations of combined characters in all languages, but maybe something like an optional parameter that says "never split the following strings" would be useful here. That way you could pass (using this case as an example) ["पा", "क्ष", "यो", "द्यो", "का", "सा", "धा", "मी", "पा", "है"] and they would remain together in the final result. (Maybe that's still very wrong for someone who does read Denavagari, apologies if so, I'm just assuming based on the codepen.)

I've updated my pen above to work without classes, if you're interested. The function that uses the classes is still in there too for reference.

Ah, for sure! I've been working with static websites recently where I just... write the html, haha. so it makes sense to add classes then. But in a CMS or some other environment where PHP is doing the heavily-lifting, for instance, I totally get why you'd leave it that way

Hi @romain.gr There are a couple issues. First of all, you need to restructure your HTML, I believe. Right now, I can only see one item at each level that has any sub-items at all so even if your code was correct, there wouldn't be anything to animate for all the other empty items. Also, you shouldn't use a tags like you're doing – they're only for links. Using them differently can lead to all sorts of headaches when it comes to styling and accessibility. And, this is just a suggestion, but I think you should use classes to find and store elements. something like .main-nav > li > ul > li > ul > li can get confusing real quick. But it's up to you. Have a look at the forked pen below for an example of a cleaner structure. Secondly, you don't need to change the display property of the elements. using only autoAlpha should be enough. Lastly, when you do something like $secondLevelItems = $('.main-nav > li > ul > li'), you are storing all the elements that match your criteria – so if you have something like <ul class="main-nav"> <li><span>Starter Pokémon</span> <ul> <li>Bulbasaur</li> </ul> <ul> <li>Charmander</li> </ul> <ul> <li>Squirtle</li> </ul> </li> </ul> ...then $secondLevelItems would contain Bulbasaur, Charmander AND Squirtle. So then when you have a timeline that animates $secondLevelItems, all of the items everywhere get displayed; the only reason you might only see one of them is because it appeared over the others. What you need to do, then, is to create a new timeline for each element that has sub-items. You can make this easier by using loops. Have a look at the pen below. Eventually you'll also run into the issue where the mouseleave event triggers before you can actually move your pointer to the sub-item you're trying to click on. Also, be aware that using only mouseenter and mouseleave doesn't account for devices that don't use a mouse at all, like phones or computers with keyboards only.

I got sliiiightly carried away and made this, haha. I don't if it will help because I saw @Rodrigo and @PointC had provided great answers so I didn't bother commenting the code, but feel free to ask if anything is intriguing. PointC, thanks! hehe

Hi Valeria, Actually, what you're looking for is way easier than the example you showed. There are multiple ways to do what you want: you could either have, for each column, one big image with all the numbers that you animate so that it slides up or down, OR use basically the same technique but animating the background-position property, or you could do it all in CSS with no image at all in which case the column would be a div that you slide up or down. It's up to you really; the first two methods are probably equivalent (the first one is maybe a bit better performance-wise, the second one is "cleaner"), while the third one is a bit more complex but doesn't require any images. In any case, once you've animated the numbers going up or down in each individual column, you'll have to write additional code to determine which columns to animate and how many times in order to reach a specific value. That will probably be the most difficult thing to figure out. But we can help you with the first step for now.

You could also not create a timeline, just have each individual tween start the next one on complete.

Here you go. There was a whole lot of slightly weird stuff in the codepen I forked, some things that had no use and other things that didn't follow the same coding style, as if someone else had modified the pen but still saved it in @Jonathan 's account... I'm not sure what happened there... anyway, I cleaned it edit: changed the image service to loremflickr since apparently unsplash is down...? also now it picks 10 different pictures

I feel like the difficulty here is that the images don't form a "circle", they kinda rotate in the opposite direction. Maybe a way to do that would be to have inner divs that have a independent rotation with their transform origin unchanged. I'll fork one of Jonathan's pens.

I'm afraid I don't really understand a single thing of what you're suggesting, nor do I really get how a solution that takes so many lines and setup could be easier or more intuitive than just 3 tweens triggered with pointer events... Sorry! Good luck though

What I meant by 'avoiding them' was more, like, when you learn about a new thing you get all excited about it and try to do everything with it – even stuff that actually doesn't need it. I can totally see myself reworking animations to add CSS variables everywhere even if they don't do anything at all to improve the animation in question. So, gotta watch myself

I mean, you can have :hovered, :focus, :hovered:focus, :hovered:checked, :focus:checked, :hover:focus:checked. That seems like a lot, and I'm sure I'm forgetting some. And what about when you want different components of an animation to animate at different speeds? For instance, say I have a simple semi-transparent button. I want it to linearly transition to 100% opaque AND scale with a bouncy ease over 0.3s when hovered. But when I stop hovering, I want it to slowly go back to its previous opacity and scale, this time with a linear transition for both and over 0.5s instead of 0.3. And I want it to do a tiny "shake" animation when I click it if it's disabled. How would I achieve that with only className? Again, apologies if I misunderstood or missed something, I'm just trying to wrap my head around what you have in mind.

!!! this is a whole new thing to learn – gotta find out when to use it and when to avoid it. A whole new world of possibilities! Exciting

wow that's a new thing isn't it! I thought variables were exclusive to preprocessors. Great!

Why are there two declarations for .green-state and .red-state in your CSS? Why does a box with both .red-state and .green-state become red, not green? I mean, I understand the CSS, but isn't is it way less intuitive to do it that way? If I want a box to go from green, to red, to blue, to yellow, to purple... would I have to write 5 nested classes? Just wondering if I missed something (Also, I feel like there's a lot of unneeded aggressiveness in this thread – could use some humility... but I'm no mod)

Great In related news, as some might know I'm working with Three.js as well as GSAP right now, and the docs/communities are simply not in the same league. It's weird to go from Three.js's documentation to GSAP's, and to suddenly have some actual explanation for things! Would you believe it? A documentation that actually tries to make it easier to use a product...

I'm not sure if I missed it or it was added, but imo even that's a bit easy to miss. Usually when I read a doc – and I am aware this isn't great, but I assume I'm not the only one doing this – I skim the page to find the parts that are relevant to what I'm doing... with the way the staggerTo page is laid out right now, I would have read: I would put a note under the "Returns" paragraph at the top, something like: Just a suggestion

Hi everyone, this isn't a question, just an observation! I was using TweenMax.staggerTo recently and was wondering why my tween was playing if I didn't pass paused: true, but if I did and then tried to use .play() I would get an error saying something like tween.play() is not a function. Turns out staggerTo creates an array of tweens, and arrays do indeed lack a .play() function. So if you plan on controlling the playback of a single staggerTo tween, you still should put it into a timeline Maybe this ought to be mentioned in the docs? Caused me quite the headache

a second ago I was just googling to see if some people had dabbled with mixing three.js and gsap, in preparation for troubles I might run into soon. now I'm lying on the floor, dead from reading "I just whipped together a quick plugin" followed by an ACTUAL THREE.JS PLUGIN JUST CASUALLY POSTED ON THE FORUMS LIKE IT'S NOTHING okay I'm good now and have bookmarked the page. whoa

Maybe try animating top: 90% to top: 50% instead? The top CSS rule takes priority over bottom, so maybe there's some rule inheritance somewhere that messes things up... It's really hard to tell though. It looks like the div is animating to the position where it would be if it had position: relative, maybe that's worth investigating as well. Hard to provide any more help without a look at the code, like Shaun said.

if you don't want to wait until the previous animation has reached its start position it's even easier: save all the animations you'll use have a null variable that you'll use to save the current animation on click, first check if the variable is null, if not call .reverse() on it (will not happen on the very first click) .play() the new animation store the new animation in the variable the next time you click, the previous animation will be stored in your variable so it will get reversed

Hi lisartur I appreciate that you are really trying to get this to work but I must go back to what I said above and suggest that you go for simpler things first. There's a lot of things in your codepen that show you still have a lot to learn about Javascript in general, for instance all the lines like top = S(isLeft ? '.LA' : '.LA')[0] that really don't make much sense and could just be replaced with top = S('.LA')[0] It makes me wonder how much of the initial example you actually understood, vs. how much you are just copying hoping that it will somehow work. In your latest codepen, you have this part: if (ff==false) { TweenLite.set(S('.LC')[0], {y: 100}); TweenLite.set(S('.LC')[0], {rotation: 0, transformOrigin: '-100% 0%'}); } which is called in your makeTL function, but ff is only ever false once – the first time you call that function – and then stays true forever. So why is that code even in the function, and not just before it? This is why you see C being a bit jumpy – you don't position it properly at the start, and then try to fix the bad positioning with a one-time adjustment. But like I explained above, if you change the transform origin of an element that's already been rotated it will appear to move somewhere else. All of this is a matter of 1) understanding Javascript, and 2) figuring out the logic behind what you want to achieve. It isn't a matter of understanding GSAP; we've moved away from GSAP-related questions for a while now, and are just talking about general programming. This forum isn't the place for that and I don't have more time to dedicate to it. If you do figure out exactly how to get it to work "in theory" but can't find the GSAP methods to do it, then we'll be here to help you out with those.

Hi Voo, .delay() can be a bit misleading – when you call blue.play().delay(0.5), you set the initial delay for blue to 0.5s. When you call it again later on, you set that initial delay to 0.5s again, which doesn't do anything because it was already set to that value. The reason it doesn't wait again is because .delay() is only for the initial delay, that is the time before the animation plays for the first time. It is not part of the animation itself (which is why it isn't affected by the animation's timeScale). If you reverse the animation and then play it again, it will go to its starting position, but that initial delay is already 'gone'. If you want a tween that always starts after 0.5s, an easy way would be to use the position parameter like this: blue.to('.blue', 1, {x: '500%', ease: Power4.easeIn}, 0.5); If you want to add a waiting period at the end of an animation, you can add an empty tween like this: red.to({}, 0.5, {}); (or add a label) That way, when you reverse the animation, it will first "tween" nothing for 0.5s, then proceed with the tween that comes before that. (PS: this is a very minor thing, but maybe not everyone is a guy here )