[Animating TranslateY noticing flickering in React]

That is mostly because GSAP handles all the transforms using the 3D transform matrix:

https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function

https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/matrix3d

 

While setting a single transform using CSS does just that, applies a single transform. When you do that and then animate the same property with GSAP, GSAP takes that value applied by CSS and uses it's own method for transforms. That is why we recommend doing what you tried and worked, use GSAP to  set all the initial transforms that will be animated with GSAP, to avoid that extra step when the animation first runs. Also sometimes is a good idea to use the advice from the FOUC article to prevent annoying flashes before the JS runs.

 

Happy Tweening!

[move text to top one after one by scrolltrigger]

Hi,

 

Just create a loop for the cards, add a couple of to() instances to the timeline and using the position parameter create an overlap with the previous card:

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

 

Hopefully this helps.

Happy Tweening!

[Animating TranslateY noticing flickering in React]

Hi,

 

The animation looks good to me, I can't see any flickering/jittering or any other issue while changing the active element, everything looks fluent and nice on my end  on Ubuntu 22 & 20 on the latest Firefox and Chrome 🤷‍♂️

[Is there a better way to fade in text blocks based on the timeline progress?]

Hi,

 

Besides echoing the need for a minimal demo, I'd advice you to not use all that convoluted conditional logic, keep in mind that this block:

if (progress > 0 && progress <= 0.5) {
  gsap.killTweensOf([block2, block3]); // Cancel ongoing animations on block2 and block3
  gsap.to(block1, { opacity: 1, y: 0, duration: opacityDuration });
  gsap.set(block2, { opacity: 0, y: 15, });
  gsap.set(block3, { opacity: 0, y: 15, });
}

Will run 60 times per second while the progress value is less than 0.50000001, that means you'll create a new to() instance that will override a previously created one and you will be creating set() instances that are no longer needed.

 

You should use the position parameter to add your instances at specific points of your timelne:

https://gsap.com/resources/position-parameter/

 

If your instance is 10 seconds, then you can do something like this:

const tl = gsap.timeline();
tl
  .to(blocks, { duration: 10 }, 0)
  .to(block1, {
    duration: opacityDuration,
    opacity: 1,
    y: 0,
  }, 0)
  .set(block2, { opacity: 0, y: 15, }, 0)
  .set(block3, { opacity: 0, y: 15, }, 0)
  .to(blocks, { duration: 10 }, 0.5)
  .to(block1, {
    duration: opacityDuration,
    opacity: 1,
    y: 0,
  }, 0)
  .set(block2, { opacity: 0, y: 15, }, 0.5)
  .set(block3, { opacity: 0, y: 15, }, 0.5)

Of course ideally you'd have to find a dynamic way to achieve that, maybe using a combination of the position parameter and the call() method:

https://gsap.com/docs/v3/GSAP/Timeline/call()

 

Hopefully this helps.

Happy Tweening!

[Animating TranslateY noticing flickering in React]

Hi,

 

Your sandbox is not working, the response is a 404 Sandbox not found.

 

Maybe you're having issues with FOUC, check this article from our Learning Center:

https://gsap.com/fouc

 

Finally a lot of performance problems are down to how browsers and graphics rendering work. It's very difficult to troubleshoot blind and performance is a DEEP topic, but here are some tips: 

1. Try setting will-change: transform on the CSS of your moving elements. 
2. Make sure you're animating transforms (like x, y) instead of layout-affecting properties like top/left. 
3. Definitely avoid using CSS filters or things like blend modes. Those are crazy expensive for browsers to render.
4. Be very careful about using loading="lazy" on images because it forces the browser to load, process, rasterize and render images WHILE you're scrolling which is not good for performance. 
5. Make sure you're not doing things on scroll that'd actually change/animate the size of the page itself (like animating the height property of an element in the document flow)
6. Minimize the area of change. Imagine drawing a rectangle around the total area that pixels change on each tick - the bigger that rectangle, the harder it is on the browser to render. Again, this has nothing to do with GSAP - it's purely about graphics rendering in the browser. So be strategic about how you build your animations and try to keep the areas of change as small as you can.
7. If you're animating individual parts of SVG graphics, that can be expensive for the browser to render. SVGs have to fabricate every pixel dynamically using math. If it's a static SVG that you're just moving around (the whole thing), that's fine - the browser can rasterize it and just shove those pixels around...but if the guts of an SVG is changing, that's a very different story. 
8. data-lag is a rather expensive effect, FYI. Of course we optimize it as much as possible but the very nature of it is highly dynamic and requires a certain amount of processing to handle correctly.
9. I'd recommend strategically disabling certain effects/animations and then reload it on your laptop and just see what difference it makes (if any).

Hopefully this helps.

Happy Tweening!

[Horizontal scroll jumping when using element scroller]

Yeah I can't see that on my desktop/laptop (Ubuntu 22 & 20) on the latest firefox and chrome.

 

The only thing I can suggest you is to try ScrollTrigger's normalizeScroll method and pass that scroller element as the target:

https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.normalizeScroll()

ScrollTrigger.normalizeScroll({
  allowNestedScroll: true,
  target: ".outer"
});

Try that and let us know how it goes.

 

Happy Tweening

[ScrollSmoother over iframe]

I forgot to mention that this could be in part because for security reasons that the events maybe can't get passed from the iframe to the document holding the iframe, so you should check that as well.

 

Happy Tweening!

[ScrollSmoother over iframe]

Hi,

 

Honestly I couldn't tell you but you can try ScrollSmoother and every other GSAP Bonus plugin forking this codepen:

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

 

Also you can try all the bonus plugins in your local development environment by installing the GSAP Trial package:

https://www.npmjs.com/package/gsap-trial

 

Hopefully this helps.

Happy Tweening!

[Scroll Trigger pinnedContainer confusion]

Hi @DottyTom and welcome to the GSAP Forums!

 

The reason  you're seeing other elements scroll over the one with the red/blue one is because you have pinSpacing false on all of them, including the one with the blue element.

 

Maybe you're trying to do this:

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

 

Hopefully this helps.

Happy Tweening!

[DrawSVG with ScrollTrigger adapt to speed of scroll?]

Hi @eblohm93 and welcome to the GSAP Forums!

 

Your codepen is not working because you didn't wrap the ScrollTrigger config into an object:

// Wrong
gsap
  .timeline({
  scrollTrigger: ".container",
  start: "top center",
  end: "bottom bottom",
  markers: true,
  scrub: true,
  pin: false
})
  .from("#svg-line-mask path", { drawSVG: 0 });

// Right
gsap
  .timeline({
  scrollTrigger: {
    trigger: ".squiggle",
    start: "top center",
    end: "bottom bottom",
    markers: true,
    scrub: true,
    pin: false
  }
})
  .from("#svg-line-mask path", { drawSVG: 0 });

Here is a fork of your demo with those corrections:

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

 

Also there is a helper function that solves some issues with easing in these cases, here is a fork of that codepen with it:

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

 

Hopefully this helps.

Happy Tweening!

[Scroll based accordion-like gallery]

Hi @adamheincz and welcome to the GSAP Forums!

 

Maybe these demos can help you getting started:

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

 

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

 

Hopefully this helps.

Happy Tweening!

[Attempt at recreating an interesting text reveal]

Yeah, we got you covered, check this article from our Learning Center:

https://gsap.com/resources/fouc/

 

Hopefully this helps.

Happy Tweening!

[Integrating Horizonal and Vertical scrolling with anchors between sections. Trying to emulate an effect on example website.]

No problemo, that's why we're here for and we all have been through something like that, so I totally understand!

 

Happy Tweening!

[Horizontal scroll jumping when using element scroller]

Sorry still can see anything. This is a screen recording on my desktop, for the first 8 seconds I'm pressing start and end like a lunatic in order to quickly scroll to the top and bottom, then I'm using page up/down and I can't see anything wrong:

https://i.imgur.com/hrIKv8t.mp4

 

Can you see the same behaviour in this recording as you see it in your setup? Again, maybe I'm seeing something normal that is not and totally missing the point here 🤷‍♂️

[Snapping Cursor to Button Size]

This demo by @GreenSock should help:

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

 

Happy Tweening!

[Shared Element in GSAP]

Hi,

 

The demo you shared uses Framer, so there is nothing we can do regarding that.

 

This demo shows how to do something similar with GSAP and the Flip Plugin:

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

 

This demo shows how to use the re-parenting feature from Flip:

https://stackblitz.com/edit/vitejs-vite-xunf8c?file=src%2FApp.jsx

 

Finally @PointC, one of the superstars in these forums, has this cool demos as well:

See the Pen vVpvBE by PointC (@PointC) on CodePen

See the Pen rZZGRj by PointC (@PointC) on CodePen

 

Hopefully this helps.

Happy Tweening!

[Horizontal scroll jumping when using element scroller]

Hi @lhug and welcome to the GSAP Forums!

 

I read your post a few times and looked at your demo, but I can't seem to understand what exactly is the problem you're having, maybe I'm missing something obvious here 🤷‍♂️

 

It'd be great if you could expand a little more on this and share more details about what is happening and how.

 

This is what I'm seeing when I run your codepen demo:

https://i.imgur.com/OIzbadZ.mp4

 

Then when I use the mouse wheel I can't see anything unusual or wrong.

 

Happy Tweening!

[GSAP ScrollTrigger with separate scrollRef in React]

Yeah that is most definitely not a GSAP related problem, the fact that the issue disappears after you remove a component that has no GSAP code in it tells us that, whatever is causing this problem is inside that component. I'm not sure about what you're trying to do in there, but you should really try to optimize it because I made a performance recording with devtools with just that component, no GSAP code whatsoever, and the performance is as bad as with GSAP.

 

Unfortunately this boils down to something that is beyond the scope of these free forums and the help we can provide here, since we have to focus our time to GSAP related issues.

 

Happy Tweening!

[Compatibily problem with ipad and/or IOS]

Hi,

 

Is great to hear that you were able to solve this. Yeah some of this issues in Safari are really mind boggling 😵‍💫

 

Finally thanks for sharing your solution with the community, I'm sure many users will benefit from your generosity and insight 💚

 

Happy Tweening!

[nuxt cleanup and scrolling trigger]

10 hours ago, Mukhriddin said:

But what about cleaning up?! 
When I scroll to bottom and refresh the page, it doesn't clean the animation and get back to top.

Cleanup is not needed when refreshing the page, that's a whole new load of everything in it. If you want to keep the scroll position you can try with scroll restoration, using ScrollTrigger's clearScrollMemory method:

https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.clearScrollMemory()

 

Also you can find out more here:

https://stackoverflow.com/questions/73049943/scroll-behaviour-not-working-in-nuxt3-application

https://github.com/nuxt/nuxt/issues/22487#issuecomment-1867422709

 

Hopefully this helps.

Happy Tweening!

[Attempt at recreating an interesting text reveal]

6 hours ago, fantaz said:

Do you think it's better to add it using gsap.set?

Shouldn't really matter, the only suggestion we have around here when it comes to transforms is to always use GSAP for setting initial values that later you will animate with GSAP, perspective shouldn't be affected by setting it with CSS or GSAP.

 

Finally remember to add a Z value in the transform origin, because right now your rotations are just in 2D:

https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin

 

Happy Tweening!

[Attempt at recreating an interesting text reveal]

Hi,

 

Looks nice. The only change I'd do is to use yPercent instead of a percentage string:

gsap.from(lines, {
  yPercent: 100,
  rotationX: -90,
  rotationY: -30,
  duration: 0.5,
  ease: "power2.out",
  stagger: 0.08,
  transformOrigin: "center left"
});

Also in order for rotations on the X and Y axis to take effect you need to add perspective and a z value in the transform origin. I'd recommend you to read this article by David DeSandro on the subject:

https://3dtransforms.desandro.com/

 

Hopefully this helps.

Happy Tweening!

[GSAP ScrollTrigger with separate scrollRef in React]

Hi,

 

I'm not completely sure of what the issue is in your stackblitz demo, but it seems to me that your HTML/CSS needs some tinkering in order to accommodate the horizontal panels correctly.

 

Here is a simple demo showing how a horizontal movement is achieved through vertical scroll on a Next app using GSAP and the useGSAP hook:

https://stackblitz.com/edit/stackblitz-starters-zsu4zc

 

Hopefully this helps.

Happy Tweening!

[Integrating Horizonal and Vertical scrolling with anchors between sections. Trying to emulate an effect on example website.]

Hi,

 

I think the biggest issue is your initial setup. If you check the site you linked every section's top is at the same level soto speak. The last part of each section is never at the same level as the top of the next, they all start at the same level.

 

Also I think the best approach is to create a single timeline and add a part to that timeline for each section, the trick is that moving the sections horizontally has to be in the previous section and not the next one. For example if you move the first section all the way to the bottom, that part of the timeline should also move the sections to the left. If you add a label to the start of each part of the timeline, then you can ScrollTrigger's labelToScroll method in your buttons:

https://gsap.com/docs/v3/Plugins/ScrollTrigger/labelToScroll()

 

Here is a super simple demo I made using this approach, you can toggle the overflow to see my idea of the setup:

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

 

Hopefully this helps.

Happy Tweening!

[nuxt cleanup and scrolling trigger]

Hi,

 

I think you're looking for the pin option for ScrollTrigger. From the ScrollTrigger docs:

pin
Boolean | String | Element - An element (or selector text for the element) that should be pinned during the time that the ScrollTrigger is active, meaning it will appear to "stick" in its starting position while the rest of the content continues scrolling underneath it. Only one pinned element is allowed, but it can contain as many elements as you want. Setting pin: true will cause it to pin the trigger element.

Warning don't animate the pinned element itself because that will throw off the measurements (ScrollTrigger is highly optimized for performance and pre-calculates as much as possible). Instead, you could nest things such that you're animating only elements INSIDE the pinned element.

Note: if you are pinning something that is nested inside another element that also gets pinned, make sure you define a pinnedContainer so that ScrollTrigger knows to offset the start/end positions accordingly.

 

Also there could be an issue here, related to the fact that you're trying to pin an element whose height is less than the height of the screen. In those cases is better to wrap the element you want to pin, as shown in these demos:

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

 

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

 

I made a fork of your demo with a few adjusments to pin those elements:

https://stackblitz.com/edit/nuxt-starter-zkkx6z?file=components%2FTruckSimulator.vue,app.vue

 

Hopefully this helps.

Happy Tweening!