jollygreen

This is an old post but thought the following solution could be of interest; we can use the ResizeObserver. // Function to update scrollTrigger positions dynamically const updateScrollTrigger = () => { elementsRef.current.forEach(element => { ScrollTrigger.refresh(); }); }; // Watch for changes in the size of the dynamic height element (#resizeableElement) const resizeObserver = new ResizeObserver(updateScrollTrigger); resizeObserver.observe(document.getElementById('resizeableElement')); // Use the correct ID // Cleanup function return () => { resizeObserver.disconnect(); };

@GreenSock - makes sense. Thank you.

How can I add a class to an element with GSAP3? In the code I'm working on, I need to add and remove a class using GSAP. Below is an example of what I'm trying to accomplish. Thanks for you help.

@GreenSock - Thank you very much! I greatly appreciate it.

@Toso - I was not able to loop the carousel indefinitely with a pause on each box when utilizing the function. If you have any additional insights or guidance on this matter, I would greatly appreciate your help.

I'm trying to move the carousel to the left 50px and pause 1 second in an infinite loop, but the carousel doesn't move. In addition, how can I add a margin of 10 px to each box? I'd greatly appreciate your help.

Thank you, @Rodrigo and @akapowl It is so much appreciated! I'm going to give it a try.

@elegantseagulls - a clip path won't work because the circles will be replaced by images.

I tried to create a peeling effect - please see demo. Could you please advise on how to make the green circle (front) to animate along with the gradient circle (back)? They are not in synch. Would there be a better way to recreate the peeling effect?

@GreenSock - yes, thank you very much.

On this pen, I have a menu that gets fixed when scrolling down and up. Nevertheless, I need to disable the fixed position so the menu doesn't overlap the header section after we scroll up to the top. Could you please advise how to do it?

Thank you very much, Rodrigo. It's working.

I'm assuming the ScrollTo plugin is free to use. Could you please advise why the scroll to code on this pen doesn't animate?

Yes, it works for me too when remove it. Thanks. got it Thank you very much!

Hi @akapowl Thank you. What about the h4 element? It appears when I hover it. https://codepen.io/jollygreen10/pen/LYRvBEd