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

@akapowl, Thank you for your insights. I'm doing something wrong because it is not working. Could you please take a look? https://codepen.io/jollygreen10/pen/LYRvBEd

I was hoping I could get some direction on how to achieve the peel effect in gsap like the below. Any help would be appreciated!

@GreenSock yes, thank you very much! looks great!

@greensock, an example, which was developed by someone else, is below. I wonder if we could streamline the code with gsap3. I thought removing the opacity would give the typewriter effect. https://codepen.io/jollygreen10/pen/wvBxpbM#code-area

@Shaun - We can animate the text with visibility:hidden using https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js

I can animate text with the following: var headline = document.querySelector('#headline'); var splitHeadline = new SplitText(headline, {type:'words,chars'}); var chars1 = splitHeadline.chars; gsap.from(chars1, {duration: 0.5, autoAlpha:0, ease: SteppedEase.config(6), stagger: 1 / 10 }) However, if I change "autoAlpha:0" with "visibility:'hidden'" to remove the opacity, the text doesn't animate. I'd appreciate your expertise.

@GreenSock - this is awesome. Thank you very much!

I understood. I was trying to build a side scrolling carousel that stops at number 5 when we click the stop button. Would there be an efficient way of doing it?

I'm trying to create an infinite carousel with a stop button. I got the following error on the console: "Uncaught Cannot add undefined into the timeline; it is not a tween, timeline, function, or string." Because of that my stop button doesn't work. Would you know why I got this error? Your help would be appreciated.

@GreenSock - it works like a charm. Thank you very much!