All Activity

Thank you guys for your time and suggestions, Currently the issue is more regarding the amount of elements generated rather than a11y, we mostly tackled that down with an approach similar to what @Cassie shared. BUT, I've been reviewing our code and it looks like the workaround I shared is working fine and the animation issues I mentioned were mostly related to how we were cleaning up some SrollTriggers rather than related to the timeline, so it's mostly fine ATM. Still I think setting the timeline duration to 0.01 is a pretty hacky way around it, if you think there's a better way to do it I'm all ears!

Hi @akapowl welcome to the forum! Can you please create a more minimalist demo. There are a lot of empty new lines, could really help if you could clean those up 😂

Hello. I just ran into an issue when using Observer. It appears that the onDrag callback often times will get fired (seamingly an additional time) after the onDragEnd callback, when dragging decently quickly. That messed up some logic of mine in an onDragEnd callback function when working with values set in an onDrag callback function. I will probably be able to work around that for now - just wanted to report and get some feedback on this; since I can't really imagine this would be intended behaviour. https://codepen.io/akapowl/pen/RwmgJNp

Here it doesn't look ok on Safari (Version 17.2.1) and I think this is because of the nesting of elements. I would not nest elements, but have them on the same level and transform a parent element, eg something like this https://codepen.io/mvaneijgen/pen/ZENyoNw?editors=0100

Can you detail steps to recreate and what you're seeing? Everything looks a ok to me on the latest chrome

Thank you.

Hi @Cassie I recreated a demo that represents the problem https://codepen.io/Dmytro-Karaulov-the-flexboxer/pen/OJYgQYr

Thank you!

Maybe try the window load event instead of DOM content loaded: https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event Hopefully this helps. Happy Tweening!

Hi, One option could be to add lines to the SplitText config and add aria labels to the lines, that would reduce the amount of elements you have to go through and maybe screen readers can catch on those. Happy Tweening!

As Cassie and Mitchel mention I don't see a good reason for this neither, sounds quite wasteful especially when GSAP allows you to do this: https://codepen.io/GreenSock/pen/abRVwed

@Rodrigo Thanks a lot! I had overseen that the onComplete function was reseting the direction.

100% - I can't see any benefit to doing this at all. I'd recommend either using JS *just* to fire off CSS animations, or ditch the CSS animations and use GSAP to animate. I can't see any reason why you'd animate something with GSAP AND CSS at the same time. Sounds like a big no-no. Intrigued as to how it's working at all to be honest!

Hi, Maybe this demo can provide a good starting point: https://codepen.io/GreenSock/pen/zYaxEKV Hopefully this helps. Happy Tweening!

This thread has some good suggestions. Also you can use SplitText.revert() to undo the split and restore element's original state.

It's working ok in this demo with opacity. https://codepen.io/GreenSock/pen/oNRwdvV?editors=0010 If you can replicate it in a smaller codepen we can take a look and try to track it down for you!

Hey there, thanks for the clear demo! The best way to get around this is to wrap the sections and pin a containing element. Like so - https://codepen.io/GreenSock/pen/NWVgYZR?editors=0010 I've tweaked the final cards trigger to use pinnedContainer so that the trigger positions aren't thrown off. https://gsap.com/docs/v3/Plugins/ScrollTrigger/?page=1#pinnedContainer

Hi there! This is because it's important to create your ScrollTriggers in the order they appear on the page. You have an event listener wrapped around the first one, waiting for the data to be ready, so the last ScrollTrigger is created before the first one. You can call ScrollTrigger.sort() to fix this issue. https://codepen.io/GreenSock/pen/BaeZrbo I've also rewritten your final tween as it's not animating anything so it makes more sense as a standalone ScrollTrigger, hope this helps!

Thank you so much!!!

Actually I found what causes this behaviour. It's OPACITY! Once I remove opacity from animation it starts behave like it should. I am not sure if this is gsap bug or css bug.

pinning a section with lottie animation with scrolltrigger offsets the start and end value of the other scrolltrigger https://codepen.io/wetwhite/pen/wvbeyBy

Yes!

Hi, I have a problem with subsequent pinned sections. It all worked fine when the sections had 100vh height, but now I need to reduce the height of the sections. If I simply make the section smaller, the pin creates huge white space around the pinned section, but if I set pinSpacing: false the second section overlaps the first. How can I solve this? Thank you very much.

I am using cdn, so i dont think its problem with the version. also I have added event listener "DOM content loaded". So when every thing is loaded after that my gsap scripts gets run. Plus its the text I am animating. But anyways. Thank you so much for your help 😊

Entonces, ScrollSmoother es pago?