[How to reset ScrollTrigger trigger position?]

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();
    };

 

[GSAP3 {className:"+=classname"}]

@GreenSock - makes sense.  Thank you.

[GSAP3 {className:"+=classname"}]

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.

See the Pen WNPPWKP by jollygreen10 (@jollygreen10) on CodePen

[Carousel with Modifiers plugin]

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

[Carousel with Modifiers plugin]

@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.

[Carousel with Modifiers plugin]

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.

See the Pen WNPyOPG by jollygreen10 (@jollygreen10) on CodePen

[Peel Token]

Thank you, @Rodrigo and @akapowl

 

It is so much appreciated!  I'm going to give it a try.

[Peel Token]

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

[Peel Token]

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?

See the Pen oNPgwKG by jollygreen10 (@jollygreen10) on CodePen

[Fix Menu on Scroll]

@GreenSock - yes, thank you very much.

[Fix Menu on Scroll]

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?

See the Pen MWBEYGQ by jollygreen10 (@jollygreen10) on CodePen

[Scroll to an Element]

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

[Scroll to an Element]

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?

See the Pen jOpGOwO by jollygreen10 (@jollygreen10) on CodePen

[Peel Effect]

16 minutes ago, akapowl said:

I don't know why you put that tween on the h4 in your mouseleave there, but when I remove that, it's working just like in the demo you provided initially. Is it not for you?

Yes, it works for me too when remove it.  Thanks.

 

17 minutes ago, akapowl said:

I went ahead and made your targets a bit more specific (so you don't end up animating all h4s on your page for example) and removed those durations of .75, because you don't need them anymore since you have those in the defaults.

got it

 

Thank you very much!

[Peel Effect]

Hi @akapowl

 

Thank you.  What about the h4 element?  It appears when I hover it.

 

See the Pen LYRvBEd by jollygreen10 (@jollygreen10) on CodePen

 

[Peel Effect]

@akapowl,

 

Thank you for your insights. I'm doing something wrong because it is not working.  Could you please take a look?

 

See the Pen LYRvBEd by jollygreen10 (@jollygreen10) on CodePen

[Peel Effect]

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!

See the Pen axEgL by patrickkunka (@patrickkunka) on CodePen

[Text Animation - gsap3]

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

[Text Animation - gsap3]

@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.

 

See the Pen wvBxpbM#code-area by jollygreen10 (@jollygreen10) on CodePen

 

 

[Text Animation - gsap3]

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

[Text Animation - gsap3]

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.

 

 

[Uncaught Cannot add undefined into the timeline; it is not a tween, timeline, function, or string.]

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

[Uncaught Cannot add undefined into the timeline; it is not a tween, timeline, function, or string.]

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?

[Uncaught Cannot add undefined into the timeline; it is not a tween, timeline, function, or string.]

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.  

 

See the Pen WmwYOW by jollygreen10 (@jollygreen10) on CodePen

 

See the Pen WmwYOW by jollygreen10 (@jollygreen10) on CodePen

[TweenTo Not looping forward]

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