Rodrigo

Hi,
 
I believe that this is more a rendering glitch on Chrome than a GSAP issue. 
 
As you can see in this example I made the border 2px and added an extra element on top (<hr>) in order to keep the border to 1px:

See the Pen mdQQOzB by GreenSock (@GreenSock) on CodePen
The issue is still there, but I don't see it on Firefox, just on Chrome.
 
This is a fork of the same pen but without the <hr> tag, the 2px border looks good and there is no flickering neither on Chrome nor Firefox:

See the Pen poQQNQY by GreenSock (@GreenSock) on CodePen
 
If you want your border to be just 1px you'll have to find some way to mimic it using maybe an image, SVG or canvas.
 
Hopefully this helps
Happy Tweening!

Hi,
 
How about something like this:

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

Hi,
 
If I'm understanding what you're trying to achieve maybe this could be a good starting point:

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

Hi,
 
Just wrap both elements and pin the wrapper:

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

Hi,
 
The problem is that the code is being ran before the image gets to load, so this reports the wrong number:
image.clientWidth - window.innerWidth Most likely image.clientWidth is zero at that point and that's why your markers are in an odd position:

As you can see the end point is already passed before the start point is passed, so your animation goes super fast.
 
On top of that using this to set your end point:
end: () => image.clientWidth - window.innerWidth, Basically tells ScrollTrigger to set your end point to an absolute value in the viewport. Is better to make that relative to the start point like this:
end: () => ("+=" + image.clientWidth - window.innerWidth), Here is a fork of your codepen:

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

Hi,
 
This is a very tricky situation since you are animating the height of the elements which is actively changing the height of the document. On top of that I see that you are animating the padding bottom of the elements as well, that just adds an extra wrinkle to this whole thing.
 
This is the simplest way I can think of in order to make it work:

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

Hi,
 
I have zero experience with Intersection Observer so I couldn't tell you exactly what the problem is, but clearly is related to that because if I just create the stagger animation for the elements without it I don't get the error.
 
I think in this case ScrollTrigger Batch would be the best way to solve your issue. Besides working on top of ScrollTrigger, ScrollTrigger is far more optimized than Intersection Observer:
https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.batch()
 
Here is a simple example of how it works:

See the Pen NWGPxGZ by GreenSock (@GreenSock) on CodePen
 
Here is a more complete example:

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

Hi @JPM and welcome to the GreenSock forums!
 
The problem is that there is no resetTimeline method in your example that reverts all the styles applied to the modal, so when you click in another element, the modal's initial position gets weird because of that. Reversing the timeline has nothing to do with this.
 
Here is a fork of your codepen that takes that into account:

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

Hi,
 
Your button has a duration-200 class that adds a CSS transition duration to it. Removing it seems to make it work the way you intend:
https://codesandbox.io/p/sandbox/infallible-thunder-h6yjpj?file=%2Fapp%2Fpage.tsx%3A47%2C11
 
Hopefully this helps.
Happy Tweening!

Hi,
 
The problem is that you're asking the wrong hook for the job. This is not a job for the mounted hook is a job for the watch hook:
https://vuejs.org/guide/essentials/watchers.html
 
You have to wait until loaded is updated, once is updated and the DOM has been updated you can create your ScrollSmoother, ScrollTrigger and any other GSAP instances:
https://vuejs.org/api/general.html#nexttick
 
Here is a fork of your example:
https://stackblitz.com/edit/nuxt-starter-dskjju?file=app.vue
 
Hopefully this helps.
Happy Tweening!

Hi,
 
It can be done but it would create an unexpected result, the reason being that MatchMedia will take care of reverting everything that is created within it's scope and run the animation when the breakpoint is passed, but if you add animations outside that scope only the animation within the scope will run and the other will stay in the state they are at that point.
 
Here is a simple example that illustrates how this behaves:

See the Pen GRwXwLR by GreenSock (@GreenSock) on CodePen
 
If that is what you are looking for as a result, then go ahead. My advice will be to always put everything inside the MatchMedia instance in order to correctly revert and avoid odd visual glitches or situations like this, but you'll have to decide what's the best outcome for your project.
 
Hopefully this helps.
Happy Tweening!

Hi,
 
I've been fiddling with this for a bit and I think having two Flip instances that somehow affect the same element is not helping. On top of that you are just copy pasting code without fully understanding how that code works. You have this:
flipCtx && flipCtx.revert(); But nowhere in your code you are creating the GSAP Context instance. I'd suggest you to read and learn about GSAP Context in order to properly grasp what it does and how is useful in this case:
https://greensock.com/docs/v3/GSAP/gsap.context()
 
This is the closest I can get to a working solution without investing a lot of time:

See the Pen abQaZRa by GreenSock (@GreenSock) on CodePen
 
Unfortunately we don't have the time resources to provide custom solutions to our users especially in complex scenarios like this. If you want you can contact us for a paid consulting job or post in the Jobs & Freelance forums to get help there.
 
The final advice I can give you is to not use the Flip plugin for the second animation. You have elements with fixed heights so you should use Flip only for the translation (first part). For growing the element just get the ratios and scale the element or animate it's width/height using a regular to() instance.
 
If I have more time I'll try to circle back to this and try the approach I suggested you at the end.
 
Hopefully this helps.
Happy Tweening!

Hi,
 
I looked at your code and more important, how is working on the browser and I can't spot anything that looks odd to me. If it ain't broken don't fix it, right?
 
Happy Tweening!

Hi,
 
When debugging or trying to find an issue, always use markers in your ScrollTrigger instances.
 
Maybe you're trying to do something like this:

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

Hi @Mrcs and welcome to the GreenSock forums!
 
This is yet another round of the gift that keeps on giving: React's double call on the useEffect hooks, introduced on Strict Mode since version 18 😑
 
The issue: since the use effect is called twice, the ScrollTrigger/Lottie helper function is created twice which totally messes every calculation in the second call. The possible solution for now is to store the lottie instance returned by the helper function in a ref and check if that exists in order to not create it again:
useLayoutEffect(() => { const ctx = gsap.context(() => { if (!lottieTween.current) { lottieTween.current = LottieScrollTrigger({ trigger: '.wrapper', target: '.lottie-container', path: 'https://assets-v2.lottiefiles.com/a/940e9c48-118b-11ee-91bd-379eb366d204/RJaC0UUtyE.json', speed: 'medium', start: 'top top', end: '+=200%', pin: '.wrapper', scrub: 1, markers: true, }); } }); return () => ctx.revert(); }, []); Here is a live example of that in place:
https://stackblitz.com/edit/vitejs-vite-emmptw
 
Hopefully this helps.
Happy Tweening!

Hi,
 
You have to create a SpltiText instance for each word and then target that instance in the Timeline instance with the ScrollTrigger configuration.
 
Here is a fork of your example:

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

Hi,
 
You can  use a circular clip path with elements positioned absolutely, in order to stack one on top of the other. All you have to do is create a timeline in order to create the sequence you're looking for:

See the Pen QWJBjRO by GreenSock (@GreenSock) on CodePen
 
Hopefully this is enough to get you started.
Happy Tweening!

Hi,
 
The issue is that you are pinning the same elements that you are animating, that is one of the most common errors in ScrollTrigger.
 
You should pin the parent element not the panels and create a single timeline to animate all the elements in the sequence you want.
 
Here is a fork of your example:

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

Hi,
 
On top of @mvaneijgen's advice I suggest you to take a look at this article:
 
Be sure to queue your JS files correctly. Add GSAP and ScrollTrigger first and then queue your custom JS file making sure that both GSAP and ScrollTrigger are dependencies so every GSAP file you need is loaded and ready to use when your custom JS file executes.
 
Hopefully this helps.
Happy Tweening!

Yeah IDK about that, must be something else in your HTML/CSS, as you can see in this example everything is working as expected:

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

Hi,
 
Normally we don't create custom solutions or examples for our users but this was simple and short:

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

Hi @Lord and welcome to the GreenSock forums!
 
Just use the Text Plugin with some inline elements:
https://greensock.com/docs/v3/Plugins/TextPlugin
 
Here is a super simple example:

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

Hi @Nadnerb and welcome to the GreenSock forums!
 
Actually everything is working as expected here. The only thing is that you have a syntax issue in your code:
tl.call(frame1()) .call(frame2()); tl.call(nextThing()); That basically calls the frame1, frame2 and nextThing methods at runtime not when the timeline instance runs, you have to change it to this:
tl.call(frame1) .call(frame2); tl.call(nextThing); As for he timing issue, it seems that you are expecting that one timeline should happen after the previous one has completed, which is not the case with the call() method. The call method is just a way to tell GSAP to execute a specific code at some point in a Timeline instance, after that code is executed it will go to the next one. GSAP just doesn't care about how long it takes to anything related to that call() method.
 
Here is a fork of your codepen with some console logs in  it:

See the Pen dyQmBob by GreenSock (@GreenSock) on CodePen
 
Maybe you could take a look at the add() method and use a function that creates and return a timeline:
const frame1 = () => { const tl = gsap.timeline(); tl.to(el, {}) .to(el, {}): return tl; }; const frame2 = () => { const tl = gsap.timeline(); tl.to(el, {}) .to(el, {}): return tl; }; tl.add(frame1()) .add(frame2()); https://greensock.com/docs/v3/GSAP/Timeline/add()
 
Hopefully this helps.
Happy Tweening!

Hi @goyounj and welcome to the GreenSock forums!
 
There are a few issues in your setup, mostly in your final ScrollTrigger instance.
gsap.timeline({ scrollTrigger: { trigger: ".lastHorizontalSection", start: "right right", endTrigger: ".divE", end: "bottom bottom", snap: 0.1, } }); First your start point. Horizontal start/end points are only available with Container Animation, not in the regular vertical setup, like the one you have in place:
https://greensock.com/3-8#containerAnimation
 
Second your trigger element. Since you're using an invalid start point it defaults to "top bottom" which will happen as soon as you get to the horizontal section.
 
Third your snap value will snap to 10% increments of the ScrollTrigger instance's progress which might not be what you're looking for.
 
Finally there is no need to create three different GSAP Context instances in this case since the scope for all of them seems to be mainRef, so creating a single one should suffice. Sure enough there is no problem in creating three and there shouldn't be a performance issue but is a redundancy, just an FYI.
 
Here is a fork of your codepen that seems to work the way you intend:

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

Well that depends on the flow you have and if it will affect the initial load with a Flash of  Unstyled Content:
 
Also you should consider if a from instance could affect some other tween on the same element down the line, which could affect that instance's initial state.
 
The best approach, as always, is test and see how it works, everyone has a different approach and ways of working and setting up their projects. My goto approach is always set initial state with CSS and then use GSAP. In specific situations you might have to use a combination of CSS styles and a GSAP set() instance before creating the animations, but again that will depend on the way you're setting up your project.
 
Hopefully this helps.
Happy Tweening!