Rodrigo

Hi,
 
It's all about using the onEnter, onEnterBack, onLeave, and onLeaveBack callbacks correctly as shown in this example:

See the Pen zYrxpmb by GreenSock (@GreenSock) on CodePen
 
Hopefully this helps.
Happy Tweening!

Hi @Glenda Negron and welcome to the GreenSock forums!
 
Thanks for being a Club GreenSock member and supporting GreenSock!
 
I think the issue here is that your second ScrollTrigger instance is getting in the way. Here is a fork of your codepen without that instance:

See the Pen xxQdWBo by GreenSock (@GreenSock) on CodePen
 
Also as you can see there is some white space there as well, that's basically the document's background becoming visible. You can give the body the same background color you're giving the other section in order to prevent that
 
This is not helping as well IMHO:
onUpdate: (self) => { // Adjust the autoAlpha of section 1 based on the scroll position hero.style.visibility = self.progress === 0.5 ? "hidden" : "visible"; hero.style.zIndex = self.progress === 1 ? "-5" : "5"; // Adjust the autoAlpha of section 2 based on the scroll position boxIntro.style.opacity = self.progress === 0.5 ? 0 : 1; boxIntro.style.zIndex = self.progress === 1 ? "4" : "4"; } That is extremely wasteful since you're updating those styles on every update from that ScrollTrigger instance. If you want to do something at the end of the ScrollTrigger instance (progress = 1) then just add a set() instance at the end of the timeline that does that. Same with the other condition, just add a set() instance midway through the timeline.
 
Finally I think that there are better ways to achieve this, maybe pin the second section while still transparent and then animate it's opacity and visibility using autoAlpha. Unfortunately I don't have time now to create an example that works the way you intend.
 
One last thing, you are using some CSS transitions in some of your elements, if for some reason you try to animate the same property with GSAP you'll get unexpected results, because any time GSAP updates the specific property for that element CSS will also try to animate said property.
 
Hopefully this helps getting you started.
Happy Tweening!

Hi,
 
Create two texts that are in the same position (absolute in a parent that has position relative) and then just use SplitText to create the lines and animate them in sync.
 
Something like this example but with lines:

See the Pen mdKWBmm by GreenSock (@GreenSock) on CodePen
 
Hopefully this helps.
Happy Tweening!

Hi,
 
If I'm understanding correctly what you're trying to do, honestly I don't think you need Flip for this.
 
Here is a simple example that uses invalidateOnRefresh in order to flush the initial values of the animation and function based values in order to get the right ones when ScrollTrigger refreshes:

See the Pen mdQXoEW by GreenSock (@GreenSock) on CodePen
 
Hopefully this helps.
Happy Tweening!

Hi,
 
Great work. Just a few thoughts:
When the pointer gets close to the left the last image becomes visible over the first, better set the first z-index to 10 in your CSS: section:first-child { z-index: 10; } Since the swap is immediate, I don't see the use of using to() instances, better use set() instances and a final one after the loop in order to give some gap for the final image to become visible: sliderVisuals.forEach((visual, i) => { console.log(sliderVisuals); visualsTL.set(visual, { zIndex: 10 }, i * 0.5); }); visualsTL.to({},{}); Here is a fork of your codepen with a better and cleaner approach IMHO:

See the Pen LYXQWvg by GreenSock (@GreenSock) on CodePen
 
Hopefully this helps.
Happy Tweening!

Hi,
 
Is really hard for us to debug or find issues without a minimal demo. We have a collection of React starter templates in Stackblitz, feel free to fork any of them in order to illustrate the problem you're having right now:
https://stackblitz.com/@GreenSockLearning/collections/gsap-react-starters
 
On top of that I see that you're not using GSAP Context in your effect hook. When working with React GSAP Context is your best friend since it allows you to prevent issues with useEffect and useLayoutEffect double calls in Strict Mode (since React 18), which most likely is the source of the issue you're having. Please check the resources in this page to learn more:
 
Hopefully this helps.
Happy Tweening!

Hi @samp and welcome to the GreenSock Forums!
 
Maybe these examples can help:
 

See the Pen LYJavxr by GreenSock (@GreenSock) on CodePen
 

See the Pen mdKWBmm by GreenSock (@GreenSock) on CodePen
 
The second example uses SplitText which is a benefit of Club GreenSock members. Is worth noticing that being a Shockingly Green Club member gives you access to all the bonus plugins and their updates for a year, which will let you do all sort of crazy things in all your projects, which normally pays itself with one project or two, then is all benefits.
 
Hopefully this helps.
Happy Tweening!

Hi,
 
I think the issue here is that your path is not a line but a closed path. DrawSVG animates the stroke of a path not the fill.
 
Here is a fork of your codepen with a stroke and stroke-width applied to it so you can see the problem:

See the Pen JjeMRBm by GreenSock (@GreenSock) on CodePen
 
You have to make that particular pat a single line, like the example you linked from the GreenSock collection.
 
Hopefully this helps.
Happy Tweening!

Ahh, super simple. GSAP automatically sees that you are creating an animation on the same target that will animate the same properties, so it overwrites the previous animation, which gets killed. That's why that onComplete is not called.
 
Hopefully this clear things up. Let us know if you have more questions.
Happy Tweening!

Hi,
 
This seems to be what you're trying to achieve:

See the Pen WNYdxZm by GreenSock (@GreenSock) on CodePen
 
Hopefully this helps.
Happy Tweening!

Hi,
 
A few things. First and foremost is the fact that ScrollTrigger has a configuration option called immediateRender. This basically tells ScrollTrigger to not render the GSAP instance immediately which is causing the problem. To make it short when your code runs the boxes have an opacity of zero, so when it first renders that instance (the one controlled by ScrollTrigger) takes that as the starting point of the animation, so basically GSAP is taking the elements from opacity 0 to opacity 0, so as soon as you scroll a bit, they disappear. Is not a bug just the way things work and why the immediateRender option is handy in these cases.
 
Another thing is that you can create a single GSAP instance for both cases and no need to create a separate ScrollTrigger instance for each element. In the case of the first animation you can use stagger to separate each instance:
https://greensock.com/docs/v3/Staggers
 
In the case of the ScrollTrigger instance you can use function based values which in the case of an array will loop through the elements passing the index to a function.
 
Here is a fork of your codepen:

See the Pen WNYXYVb by GreenSock (@GreenSock) on CodePen
 
Hopefully this helps.
Happy Tweening!

Hi @adityanithariya and welcome to the GreenSock forums!
 
There is not a super easy way to animate the paths using the bezier curve methods the Canvas API has.
 
This approach from @OSUblake (GSAP's canvas/WebGL wizard) is far simpler:

See the Pen GjYpPM by osublake (@osublake) on CodePen
 
These are the keys to this:
https://developer.mozilla.org/en-US/docs/Web/API/Path2D/Path2D
https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash
 
It requires to get the path as an SVG path data, but that should be far simpler than creating this using the quadraticCurveTo() method.
 
Hopefully this helps.
Happy Tweening!

Hi,
 
Sorry for the delayed response.
 
The problem is that once you disable a ScrollTrigger instance it's callbacks won't be fired again because it is kaput. What you could do is create a second ScrollTrigger (stB) in order to enable the other one (stA) which will disable itself, something like this:

See the Pen BaGwrOB by GreenSock (@GreenSock) on CodePen
 
Hopefully this helps.
Happy Tweening!

Hi,
 
This should be a question for the author actually:
https://codepen.io/superbenj/details/RwxmOvQ
 
Craig actually forked that one, most likely to answer a question here in the forums.
 
For what I can see from the code this should do the trick though:
let groups = gsap.utils.toArray(".accordion-group"); let menus = gsap.utils.toArray(".accordion-menu"); let menuToggles = groups.map(createAnimation); menus.forEach((menu) => { menu.addEventListener("click", () => toggleMenu(menu)); }); function toggleMenu(clickedMenu) { menuToggles.forEach((toggleFn) => toggleFn(clickedMenu)); } function createAnimation(element) { // ... } toggleMenu(menus[0]); Hopefully this helps.
Happy Tweening!

Hi,
 
This should not be that difficult actually. Unfortunately we don't have the time resources to build fully working examples for our users, but I was able to at least create a very simple example for the titles. It doesn't has all the bells and whistles you're aiming for but hopefully it will get you closer to what you're trying to achieve:

See the Pen BaGwXGp by GreenSock (@GreenSock) on CodePen
 
Finally keep in mind that a Flip.from() instance returns a GSAP Timeline, so you can easily tack on to that one or even further add the timeline returned from the Flip.from() method to another timeline in order to sequence things correctly.
 
Hopefully this helps.
Happy Tweening!

Hi,
 
The issue here is not on your ScrollTrigger configuration but in the way you're creating your timeline. I removed the ScrollTrigger config and set the Timeline caught that the error was in the position parameter you were passing to the final instance of your Timeline:
.fromTo( section.querySelector(".third-content"), { yPercent: -100, y: 0 }, { yPercent: 0 }, 0 // HERE ); That basically tells GSAP to put that instance at the start of the timeline, not at the same time the previous one starts, which is what you want. I strongly recommend you to get more familiar with GSAP, Timelines and the position parameter in order to learn how to correctly use it.
 
Here is a fork of your codepen with the position parameter corrected:
https://codesandbox.io/s/fragrant-feather-pl7w5t?file=/src/App.js
 
If you can be sure to check @Carl's great learning resources:
https://www.creativecodingclub.com/bundles/creative-coding-club?ref=44f484
 
Hopefully this helps.
Happy Tweening!

Hi,
 
In this cases it's always better to update the DOM in order to make it look the way you want. The best approach is to get everything working in that way (moving and re-arranging the DOM elements accordingly) first and the add the Flip Plugin to the mix.
 
I forked your codepen example:

See the Pen GRwNmzN by GreenSock (@GreenSock) on CodePen
 
Hopefully this helps.
Happy Tweening!

Hi @Ivan Dudinov and welcome to the GreenSock forums!
 
I'm not 100% completely sure of what could be happening here, but most likely this looks like ScrollSmoother updating after the ScrollTrigger instance is being created, which alters the height of the content and that messes up with the way the ScrollSmoother instance is working behind the scenes.
 
It could be somehow related to what Jack described in this thread:
 
But is most definitely not the same scenario, that's why I'm not completely sure that my description of the issue is 100% accurate.
 
This seems to be working as you expect:

See the Pen gOQRzwg by GreenSock (@GreenSock) on CodePen
 
Hopefully this helps.
Happy Tweening!

Hi @Carlos Maurin and welcome to the GreenSock forums!
 
Is better in this cases to create an array for the links and the images. Since they have the same amount of items you can use the index of the forEach loop in order use the mouse enter event listener to set the z-index of the corresponding image.
 
Here is a fork of your codepen:

See the Pen BaGdPKg by GreenSock (@GreenSock) on CodePen
 
Hopefully this helps.
Happy Tweening!

Hi,
 
Looks nice, great work!
 
Maybe the only thing is to use yPercent instead of translateY, and definitely you don't need a function based value there.
 
Finally since everything goes in one section maybe just create a single timeline for the whole thing, no need to create all the extra timelines and ScrollTrigger instances for each element.
 
Something like this:

See the Pen vYQJrPj by GreenSock (@GreenSock) on CodePen
 
Hopefully this helps.
Happy Tweening!

Hi,
 
In the endless loop function call, here:
window.addEventListener("load", () => { // At this point all the images are loaded, then I give the // helper function the selector, which is all the img tags // it can find. Of course you can pass a more specific selector const loop = horizontalLoop("img", { repeat: -1, paddingRight: 15 }); }); Happy Tweening!

Hi,
 
I created a simple example using the Horizontal Loop without any issues:
https://stackblitz.com/edit/stackblitz-starters-9etsod?file=pages%2Findex.js
 
I tested the same with the latest version of Next (Stackblitz is having a few issues with Next 13.3 and above for now, so the version in the link is a bit old but still valid) on my local machine and the app router without any issues. Most likely the error you're getting comes from something else.
 
Hopefully this helps.
Happy Tweening!

Hi @Danclp and welcome to the GreenSock forums!
 
Unfortunately I don't have time now to dig into this since your demo is not exactly minimalist.
 
The only thing I can suggest right now is to remove all your GSAP animations and ScrollTrigger instances. Does your HTML looks the way it should? If it does then just create the animation for the final section and completely forget about the first one. Does the animation starts where it should? Then test only the animation and ScrollTrigger instances for the first section and completely remove the animations and ScrollTrigger for the second one. Does the second section is where it should be?
 
Also I noticed that you are creating the second ScrollTrigger instance after the first one is completed, I definitely wouldn't do that, just create both ScrollTrigger instances at the same time in the order they should happen.
 
Hopefully this helps. If you keep having issues, please reduce your demo as much as possible, we don't need to see your entire project, just a few colored divs and as little JS as possible, that emulate your current project and clearly illustrate the issue you're having.
Happy Tweening!

Hi,
 
I checked your example and I'm not 100% sure I follow exactly what you're trying to do. Right now all your markers are in odd positions and pass the start and end points in the viewport because they're being conditionally rendered here:
{firstPageOn ? ( <div ref={firstPage} className="fixed inset-0 flex items-center justify-center w-screen h-screen bg-black" > <h1 className="text-white">Loading...</h1> </div> ) : ( <div> <div className="bg-blue-700 h-screen w-screen flex justify-center items-center" ref={blue} > <div className="absolute bg-pink-500 w-32 h-32" ref={pink}></div> </div> <div className="h-screen w-screen bg-green-200" ref={green}></div> </div> )} So those elements are not in the DOM when the page first renders. You have to pass the firstPage state property as a dependency there:
useEffect(() => { if (firstPageOn) return; let ctx = gsap.context(() => { gsap.to(blue.current, { scrollTrigger: { trigger: pink.current, scrub: 1, pin: pink.current, start: 'top 40%', end: 'bottom 10%', markers: true, }, }); gsap.to(green.current, { scrollTrigger: { trigger: pink.current, scrub: 1, pin: pink.current, start: 'top 60%', end: 'bottom 10%', markers: { indent: 300 }, }, }); return () => ctx.revert(); }); }, [firstPageOn]); Finally I don't see any opacity animation except for the one of the blue ref. If you want to keep the child elements of that particular one, then give each of those an opacity: 0
 
Hopefully this helps.
Happy Tweening!

Hi @wayz and welcome to the GreenSock forums!
 
When using GSAP in a React environment always use GSAP Context:
https://greensock.com/docs/v3/GSAP/gsap.context()
 
Also take a look at the resources in this article:
 
Finally we have a collection of starter templates in Stackblitz so you can fork one of them and illustrate your issue. Please don't include all the styles, components and everything from your project, just enough to show the problem you're having:
https://stackblitz.com/@GreenSockLearning/collections/gsap-react-starters
 
Hopefully this helps.
Happy Tweening!