Acccent

This is definitely a Chrome issue... Adding will-change: transform to either the div or the span fixes the jitter, but makes the text become very blurry when it's finished scaling. One solution (not a very convenient one) is to immediately change the font-size of the text at the start of the animation, and scale it down to make it appear as if it was still at its initial size, and figure out the transform values so that the position is the same, and then animate back to scale: 1. After that, you can remove the will-change property. But yeah, it's cumbersome, especially if you don't know exactly where the text will be beforehand. (I've cleaned up a bit, btw)

I think at some point I need to have a proper look at Angular, React, Vue and all of these, to see how they handle this kind of thing Thanks again, lovely answers. If anyone was to contribute, go ahead!

Hi @kreativzirkel RoundPropsPlugin is just a specific implementation of the ModifiersPlugin. So you can use that to achieve what you're looking for. let decimals = 2, mod = Math.pow(10, decimals); TweenMax.fromTo(".numberCountUp", 1, { x: 0, y: 0, innerHTML: 0 }, { x: 200, y: 200, innerHTML: $(".numberCountUp").text(), modifiers: { innerHTML:function(i) { return Math.round(i * mod) / mod; } } }); //replaced .to() with .fromTo(), I assume this was a small mistake (Now, if you're saying this should be part of RoundPropsPlugins, it's not my place to answer )

Super insightful as usual, Blake! Thanks. I do know what state machines are, but never thought about implementing one in JS, haha! I assume you'd use it to manage the state of a single element, not a group that share a common "indicator" like in my example? (btw, looks like a v3 of the library you share was released last year, in case you missed it!) Also, there's the question of how to handle prioritisation. In your example, the arrow goes to whatever was last hovered/focused. Should there always be separate, independent effects for hover and focus? Maybe having a single indicator in a group of elements is just a bad practice because there can be two elements that need attentions – one that's focused, and one that's hovered. Even for a single element, and considering the use of a state machine, that issue arises. When an element that's already focused gets hovered, should the effect change, or should the "focus" effect take priority? (Maybe there should always be at least 3 effects – hover, focus, and hover+focus?)

Hey all, this question isn't strictly related to GSAP, but it is something I keep running into when using the platform. Usually, when you're just using CSS transitions, you can use transitions to animate the hover and focus states of elements. It's not perfect, but it works. :hover and :focus have the same level in the CSS hierarchy, so whatever comes last is applied, and the element returns to normal when it's neither hovered nor focused. (I'm not even gonna talk about :active.) With GSAP, if you want to apply an effect on hover and reverse it on "un-hover", you have to monitor both the mouseenter and mouseleave events, and play an animation for each of these (the same one in reverse, or a totally different one). Now, when you also want to have an effect for focused element, you need to also listen to focusin and focusout (or focus and blur). This, in my experience, has created lots of headaches. Tweens get mixed up, animations become jumpy, etc. Here's an example: As you can see, the CSS side is far from ideal, but it works predictably. If you move your mouse over the buttons on the GSAP side however, things slowly start to look weirder and weirder. Same if you tab between them. This codepen here is just an example, I'm sure I could find a way to make this all work, but the point is: it's fiddly and can be a bother to get to behave like you want it to. So I'm asking everyone, do you have tried-and-true ways to handle this type of scenario? (That is, having multiple elements whose focused and hovered states have effects that overlap) One thing I do sometimes is force the focus to whatever element receives mouseenter. This makes things a bit more consistent, but it's not a universal solution, and I'm not sure it's a good practice accessibility-wise (although I don't see why it wouldn't be, but if anyone has insight on this I'd love to hear it). Any tips and tricks you can share?

Oh, by the way, .bind() has been deprecated for quite a long time now, as the jQuery documentation states. I don't know if you're following a tutorial but if you are, maybe you wanna look for a more recent one

Ah! what your code does at the moment, if I'm not mistaken, is create a new timeline for each scroll event – and there can be hundreds or thousands of scroll events per second when the user is scrolling! I assume you don't want thousands of identical timelines First of all, you should create your timeline outside of the scroll function. Just create it anywhere and make it paused, like you're doing now. By the way, instead of what you have, you can use this: docTimeline.to(".lightLogo", 1, { y: "200%" }) .to(".text", 1, { x: "0%" }); It's exactly the same thing, just saves you some typing. Inside your timeline, use addPause() to automatically pause it at certain points. Then, when the user scrolls, use resume() to unpause it To change the direction it's playing in (depending on whether the user is scrolling up or down), you can use reversed(). That should be enough. Lastly, have a look online at the concept of throttling and debouncing, to limit the amount of events that do get handled (there's no reason to have so many per second, you can ignore most of them without anyone noticing). Here's a recent post of mine about it: https://greensock.com/forums/topic/18197-gsap-slider-over-scroll/?tab=comments#comment-83832

Hi Eeliya, That's the expected behaviour. When you add a tween to a timeline, it's not like if you added it to the end of an array of tweens; you just added it at a specific time into an animation. So if you add a tween on the 3rd second of a timeline, it will play at that moment, regardless of what's before or after it. If you would like animations to shift, then maybe such an array is the way to go. Here's an example:

Maybe you could have an onUpdate callback that checks the progress and state of the timeline? Might be expensive performance-wise, though.

If you want to show a sequence of images that are the frames of a video, maybe it would be worthwhile to investigate simply animating the video position:

Hm, I don't know why that would happen, it works fine on my computer. It might come from the fact that you're using deprecated events – you should use 'wheel': $window.on("wheel", stipple(onMouseWheel, {delay: 0.2, leading: true})); function onMouseWheel(event) { if(event.originalEvent.deltaY < 0) { // go up (or down, I can't recall) } else { // go the other way } } More info here: https://developer.mozilla.org/en-US/docs/Web/Events/wheel (that page also provides a convenient polyfill for older browsers)

Oh okay. well let us know if you encounter any other difficulties related to gsap

Also, just a small additional note, the delay for new timelines is 0 by default so you can just do leftClick = new TimelineMax();

That's weird, any value should work! It defaults to a minimum of 0.001 but that's the only constraint (it can't be 0). Can you update your codepen to see how you're implementing it?

Hi miks, you probably need a debounced function for this – a function that only activates once if it keeps getting called without a minimum time passed between two calls. https://css-tricks.com/debouncing-throttling-explained-examples/ You can either make one yourself, or use one that comes with lodash or underscore.js, or use this one that uses GSAP behind the scenes (and which I made): https://codepen.io/Acccent/pen/OQxjOx If you do use that one, you can do so like this: $window.on("mousewheel DOMMouseScroll", stipple(<your call>, {delay: x, leading: true})); (delay is the time that needs to pass without any scroll events before a next call can happen.)

Hi, (edit: whoops, I thought the two posts were by the same person! sorry @determin1st and @blaasvaer!) I'm not sure if this is what you're asking, but the included eases are detailed in the corresponding section in the docs: https://greensock.com/docs/Easing. CustomEase requires an additional plugin; CustomBounce and CustomeWiggle require a plugin and to have a Club GreenSock membership. Your RoughEase example is correct as far as I can tell, in fact it's the exact same as what's shown in the docs and the docs do use TweenLite. Generally, the page for TweenMax in the docs – https://greensock.com/docs/TweenMax – start off by mentioning what the 'Max' variant adds, namely:

Hi @ztartennery, We can't see the code used in the IHT course without getting a membership. I'm not suuuper familiar with ScrollMagic, but without seeing the code I would guess maybe you need to make the timeline paused when you create it? Something like this: var parallaxTL = new TimelineMax({paused: true});

Ah yeah, sorry that wasn't clear, the problem is totally unrelated to GSAP I assume. The only unexpected thing is, the new batch of images should only appear after it's fully loaded, but that's not what I get (my internet speed is probably a bit slow) and instead I get irregular patterns and images not changing even when, in the console, I do see the src attribute being changed. The only weird thing I noticed with GSAP is that when I tried setting onRepeat and repeatDelay on a TweenMax, it didn't work and I had to use TimelineMax. But that's completely unrelated to this thread! I'll create another one if I do run into the issue again in the future and can't figure it out

I don't know either, to be honest! The only thing I can guess is what I did with the codepen above, where each character is pushed back to a separate string after the animation, to let the browser handle the joining. It is definitely a complex issue and one that someone who does speak Arabic would need to weigh in. I assume similar issues arise with other languages, like most of the ones used in Asia for instance. It is a bit of a can of worms

I can't see anything and I'm using a Chromium browser, could you take a screenshot please?

I wanted to make a small test to show the position property (which is what I assume @Svein-Tore was thinking of when they said that Solution 2 was missing the time), using the imagesLoaded plugin to only switch to images that are ready to be displayed, but I encountered unexpected behaviour, not sure what's up with it. Here's the codepen regardless, the timeline code is good:

There are some forums where you have one "initial topic" and you can reply to it, or you can reply to the replies, or to the replies of replies, etc. and it creates a "tree" structure, a bit like reddit or facebook comments. However in other forums such as this one, "topic" (or thread) just means "one individual conversation" and adding a reply to it just means adding your comment to the end of that conversation. It can be confusing

I think that's fantastic, Jack It still doesn't really work with languages like Arabic, where, well, the whole string is a "special char" in that it's all linked.. haha. But I guess, when considering the need to handle the rtl direction on top of this current issue, it would be a lot more work overall to provide satisfactory support. Maybe for a future release! Regardless, this one addition is great already, thanks for adding it so quickly!

I updated the above codepen with another possible solution, it's a bit hacky but it involves passing the characters to a separate div once their animation is complete. I believe this would guarantee complete support since you're just recreating a regular string, but I guess the implementation wouldn't be trivial. Maybe a clean-up and a mention in the docs would work.

Just did a quick test with the Arabic for "Thank you" (after seeing this tweet) and a similar thing happens: