Hello, I’m having an issue with tabbable content being covered by an element during a ScrollTrigger 'expand on scroll' scrub animation. When navigating with the keyboard, if I tab past the animation so it completes, then shift+tab back to the “Tab back to this link” element, the link stays hidden behind the expanded element. This means a keyboard user can focus the link but can’t actually see it.
 

Is there a recommended workaround for handling this kind of issue? 

I hope I have explained this clearly.. to help I have created a pared back demo to show the issue



Thanks for your help!

See the Pen RNoKdOY by shellington (@shellington) on CodePen.

1. when the full size element is clicked to return to it's thumbnail state, I can't seem to get the z-index to have an effect on top of my other flex columns

2. when the full size element is clicked it removes the thumbnail (while it is flipping) and then returns it to the document flow when the Flip ends and you can see the column items jump when it removes and then adds the element back

These are probably simple mistakes on my part with using Flip, but I can't seem to figure out exactly how fix them

See the Pen GROqaWb by celli (@celli) on CodePen.

It is also not clear what is meant by

Quote

There is no harm in registering the same plugin multiple times (but it doesn't help either).

in the article — https://gsap.com/docs/v3/GSAP/gsap.registerPlugin ()/ .

So, to summarize, I have two questions.:
1. Should I use gsap.registerPlugin(useGSAP) inside or outside the component?
2. Is it enough to declare gsap.registerPlugin(useGSAP) in the root component, or should it be declared in all components where it is used?

the page has a side menu div which is placed in section 2 (about like- top: 100%)  from the screen. the ScrollTrigger i have for this menu div has a trigger when you scroll and reach the center of the menu div- it pins it so the menu goes down with you from then on (but not up to before the trigger). in addition, the menu div has links, which are supposed to lead to each section- this is the ScrollTo.

anyway i got both things to work on their own, but when they’re both active, my ScrollTo animation acts weird- the duration i set for it is 1, but the animation becomes really slow for a couple of  seconds, and then jumps up in normal speed. if i delete the scrollTrigger function i’ve got, the ScrollTo works perfectly well. 

Did anybody else have this issue before and could help me?☺️☺️

I've created a minimal demo and it works fine:

But on my live Webflow site it's broken: https://www.lyricarchitects.com.au/

The parallax image near the bottom of the homepage (the child with the dog) sits in the wrong position and doesn't move on fresh load. Normal refresh fixes it instantly.

Things I've tried: setTimeout delays, double requestAnimationFrame, invalidateOnRefresh, ignoreMobileResize, removing normalizeScroll, imagesLoaded, gsap.delayedCall refresh. None of them fix it on fresh load but all work fine in the minimal demo.

See the Pen YPpPORB by braymay (@braymay) on CodePen.

See the Pen EaNaNrB by cselin (@cselin) on CodePen.

<div class="testimonials">
  <div class="js-testimonials-proxy"></div>
  <testimonials-slider class="testimonials-wrapper">

    <!-- Proxy -->
 

    <!-- Images -->
    <div class="testimonials-images">
      <div class="testimonials-images-item">1</div>
      <div class="testimonials-images-item">2</div>
      <div class="testimonials-images-item">3</div>
      <div class="testimonials-images-item">4</div>
    </div>

    <!-- Content -->
    <div class="testimonials-content-slider">
      <div class="testimonials-content-wrapper">
        <div class="testimonials-content">Content 1</div>
        <div class="testimonials-content">Content 2</div>
        <div class="testimonials-content">Content 3</div>
        <div class="testimonials-content">Content 4</div>
      </div>

      <button class="prev">Prev</button>
      <button class="next">Next</button>
    </div>

  </testimonials-slider>
</div>

 

FOR MORE CHECK HERE:https://es-d-3609359120260506-019df2b9-53a8-7fc7-8ea0-d22199f1a277.codepen.dev/

See the Pen ByQNryZ by Khushali-the-lessful (@Khushali-the-lessful) on CodePen.

I need help to create similar cube grid animation when scroll down used in this website https://www.3coresec.com/. Can you guys suggests any ready made theme/template that has similar cube grid animation?

Thanks

Rayhan

• Next.js 15, React 19
• GSAP 3.14.2
• SVG ~11MB, ~820 embedded data:image/png;base64 elements
• 17 animation layers × 32 teeth = ~544 <g> elements in the DOM

• GSAP timeline animates autoAlpha

  • optional y/scale on individual elements The problem On Chrome (desktop + Android): 55–60 FPS, buttery smooth. On Safari iOS (iPhone 11–13): 2 FPS. Essentially frozen. The FPS drop happens the moment the SVG is in the DOM — even before the animation plays. Every autoAlpha change seems to trigger a full CPU re-composite of the entire SVG including all the masked PNG layers. What I've already tried Based on the docs and community posts I've gone through:

   

• ✅ Using autoAlpha instead of bare opacity
• ✅ Avoided transformBox: "fill-box" (known Safari SVG issue)
• ✅ Hardcoded transformOrigin: "50% 50%" on all animated elements
• ✅ Killing and rebuilding the timeline on each play
• ✅ translateZ(0)
  • will-change: transform on the SVG container div → broke mask rendering on Safari, reverted
• ✅ ResizeObserver debouncing
• ✅ Module-level SVG cache (so it's only fetched/parsed once per session)
• ✅ DocumentFragment for batch DOM insertion of tooth wrappers None of these moved the needle on FPS during playback. Root cause hypothesis Safari's SVG renderer doesn't promote individual <g> elements to compositor layers the way Chrome does. When GSAP updates opacity (via autoAlpha) on any element inside the SVG, Safari re-paints the entire SVG on the CPU — including compositing all 820 RGBA PNG textures through their mask paths. With 544 elements potentially changing per frame, this is catastrophic on mobile. Chrome appears to isolate painted layers more aggressively, which is why it handles this fine. Questions
• Does force3D do anything for SVG elements? I know force3D: true promotes HTML elements to their own compositor layer via matrix3d. Does this have any equivalent effect inside an SVG context, or is it HTML-only?
• Is there a GSAP pattern for GPU-accelerating SVG element opacity on Safari? Something like animating a CSS custom property that drives the opacity, or wrapping elements in a <foreignObject> to get HTML compositing behavior?
• Pre-render approach — has anyone done this? My current workaround attempt: build the GSAP timeline, seek to the end of each step, capture the SVG to ImageBitmap via XMLSerializer → Blob → canvas, then play back by crossfading pre-rendered bitmaps on a <canvas>. This removes the SVG from the render path entirely during playback. Has anyone shipped something like this? Any gotchas I should know about with GSAP .seek()
  • suppressEvents?
• Alternative: animate a parent HTML wrapper instead of SVG elements? Would wrapping each tooth's <g> group in a positioned HTML div (via foreignObject or restructuring the SVG) and animating the div let Safari use its normal HTML compositor pipeline? Minimal reproduction Happy to put together a CodePen/StackBlitz if it helps. The core issue is reproducible with any SVG that has 500+ masked RGBA PNG elements and GSAP animating opacity on them simultaneously. Any insight appreciated — this has been a tough one to crack.
  
  example animaton url : https://plan.lemaclinic.com/animation/60ahoekuy9eatji?plan=39fa1v0pa92zxp2
  If you try this on Safari or Apple mobile phones, you will experience significant performance issues, but it works flawlessly on other browsers.
  Thanks

(for some reason the codepen preview doesn't seem to be working, here's the link: https://codepen.io/editor/paramagnetism/pen/019dcfab-76bc-73fb-90d5-adff145182d1)

See the Pen 019dcfab-76bc-73fb-90d5-adff145182d1 by editor (@editor) on CodePen.

I’m working on a project with some fairly heavy ScrollTrigger animations and complex timelines, but I’ve hit a snag where my once-smooth 60 FPS animations are starting to "jank" and drop frames significantly.

I’ve been using a deltaexeutor community setup to handle some automated data logging and local script execution in the background while I develop. I’ve noticed that whenever the background executor starts a processing cycle, my GSAP animations—especially those using scrub: true—become very jerky. It feels like the background process is competing for the same CPU threads that the browser needs for the requestAnimationFrame ticks, or perhaps it's causing enough main-thread activity to delay the render cycle.

I have a few related technical questions for the animation experts here:

I’m not sure if the way a deltaexeutor style environment manages its internal threading is interfering with the browser’s ability to prioritize the GSAP tick. Has anyone else encountered performance bottlenecks or "jank" while running high-level script executors alongside their dev environment? I’m also wondering if I should try using gsap.ticker.fps(30) to see if a lower cap helps stability, or if there's a better way to ensure the browser gives more weight to the animation thread when background automation is active.

I really need to keep this automation active while I build out the site, but the stuttering makes it impossible to fine-tune my eases and durations. If anyone has experience optimizing a workstation for concurrent usage of heavy script executors and high-performance GSAP animations, I’d love to hear your advice!

Thanks!

The SVG scale animation itself works perfectly fine. I’m using ScrollTrigger with pin and scrub, and the SVG smoothly scales from a large value down to its normal size while scrolling, with a video background behind it.

However, the problem starts when I add the following CSS to improve scroll performance in my real project:

As soon as I enable this, the SVG animation starts to behave incorrectly. It begins to flicker, and in some cases it even disappears or fails to render properly during scroll. Removing will-change: transform immediately fixes the issue and the animation becomes stable again.

The reason I’m trying to use will-change: transform is that without it, the rest of the page content (especially text elements) becomes jittery and vibrates during scrolling. This seems to be related to the smooth scroll setup in my real project.

Interestingly, this issue does not appear in Safari. It only happens in Chrome and Brave (Chromium-based browsers).

See the Pen ogzKYEW by SZENTIOSZ-the-SZAMOSZ (@SZENTIOSZ-the-SZAMOSZ) on CodePen.

See the Pen JoKNgdp by arossman0825 (@arossman0825) on CodePen.

However, I’m running into a major issue with window resizing—it completely throws off my animations.

Here’s a demo of the problem: 

1. Scroll down to see the animation.
2. Scroll back up to reset it.
3. Resize the window.
4. Scroll back down—now the animation is misaligned.

It looks like GSAP is caching the tween values and not re-evaluating my dynamic x/y functions on restart. I’ve tried multiple approaches to fix this, but nothing has worked so far.

Any ideas?

See the Pen gbOdXqR by Nir-Dil (@Nir-Dil) on CodePen.

Like I said in the other thread, I've just discovered gsap "keyframes" and am loving it. That got me thinking: Often I find myself in a spot where I want a specific property to have a different easing, which always required to split it into multiple tweens, which I then usually bundled in a timeline to treat it as one single tween again (reliable onComplete, one single source of truth for pausing and progress manipulation etc.)

A simple example is moving an element in an arc. Instead of defining a path it follows, you can create the same effect by having different eases for the x and y axis.

While you can get the same duration per "sub tween" by using defaults for the timeline, you'd still have to set the position `.to(..., 0)` by hand for every sub tween. 

// works, but feels overly verbose and quirky
const tl = gsap.timeline({
  defaults: {
    duration: 0.378,
  }
})
.to(myElem, {
  x: 200,
  ease: 'power2.out',
}, 0)
.to(myElem, {
  y: 200,
  ease: 'power2.in', // ! in
}, 0)

What if you could do something like this?

gsap.to(myElem, {
  duration: 0.378, 
  x: {
    value: 200,
    ease: 'power2.out',
  },
  y: {
    value: 200,
    ease: 'power2.in', // ! in
  },
  // ... more properties all sharing the same "main ease"
})

That got me thinking though if there's a cleaner way to do a random increment to each characters stagger. So sometimes it takes 0.2 seconds, sometimes 0.3, sometimes 0.1. 

Probably a quick one for the pros amongst you

Thanks in advance for the replies!

// not really sexy to use a local counter variable
let stagger = 0;

gsap.from(split.chars, {
  opacity: 0,
  ease: "steps(1)",
  // how to recreate this without mutating a stagger variable?
  stagger: function () {
    stagger += gsap.utils.random(0.05, 0.25);
    return stagger;
  }
});

PS: Are there any plans for the easing string function to support `steps(1, end)` and `steps(1, start)`?

See the Pen JoRVvEG by katerlouis (@katerlouis) on CodePen.

See the Pen RwMepLO by scottonanski (@scottonanski) on CodePen.

This is a great forum. I appreciate the help from last time and thank you GSAP peeps in advance

Here is a code-axample which I'm currently playing with;

var animateThumbs = function() {
	var $anchors 		= $( 'div.col-md-4' ).children( 'a' ),
		ellipse 		= $($anchors[0]).find( 'ellipse'),
		duration		= .25,
		ellipseProps	= {
			from: {
				cy: ellipse.attr('cy'),
				rx: ellipse.attr('rx'),
				ry: ellipse.attr('ry')
			},
			to: {
				cy: -500,
				rx: 625,
				ry: 725
			}
		};

	//Let's set on every a-element a timeline as method
		$anchors.each( function(index, elem) {

		var ellipse 	= $(elem).find( 'ellipse' ),
			animateSvgBG= new TimelineMax({repeat: 0, paused: true });

		animateSvgBG.fromTo(ellipse, duration,
				//from
				{ attr: { 
					cy: ellipseProps.from.cy,
					rx: ellipseProps.from.rx,
					ry: ellipseProps.from.ry
				}},
				//to
				{ attr: { 
					cy: ellipseProps.to.cy,
					rx: ellipseProps.to.rx,
					ry: ellipseProps.to.ry
				}}
			);
		//animateSvgBG.to(ellipse, 1, { attr: { cy: ellipseProps.from.cy, rx: ellipseProps.from.rx, ry: ellipseProps.from.ry }}, "fadeOut");

		//labelsArray = animateSvgBG.getLabelsArray();
		//console.info(labelsArray);
		elem.animate = animateSvgBG;
	})

	$anchors.on({
		mouseenter: function(event) {
			// from "fadeIn" to "fadeOut"
			//TweenMax.fromTo(animateSvgBG, duration, {time:labelsArray[0].time}, {time:labelsArray[1].time});
			//console.info( "animateSvgBg: " +  animateSvgBG, " labelsArray[0].time: " + labelsArray[0].time, " labelsArray[1].time: " + labelsArray[1].time );
			this.animate.play();
		},
		mouseleave: function(event) {													
			// nfrom "fadeOut" to "fadeIn"
			//TweenMax.fromTo(animateSvgBG, duration, {time:labelsArray[1].time, ease:Ease.easeOut}, {time:labelsArray[0].time}); 
			this.animate.reverse();
		}	
	})
}	

I’m working with GSAP and ScrollTrigger to create a scroll-based animation where elements inside a pinned section are progressively moved/hidden.

The goal is:

• Pin a section (#div1)
• Animate headings out (move up / fade out) (#heading1, #heading2)
• Naturally reduce the section height of the pinned section as content disappears

However, the issue I’m facing is:

When the section is pinned, its height seems to be locked, and even after I move elements out of view (using negative margins and opacity), the section does not shrink.

This results in extra empty space inside the section but after the content of that section.
 

What I’m trying to achieve

• As elements are removed/moved out, I want the parent section (#div1) to shrink accordingly
• The next section (#div2) should move up naturally without gaps

What I’ve noticed

• With pin: true, ScrollTrigger seems to maintain the original height
• Even if content (#heading1) visually disappears, the layout space remains
• If I disable pinSpacing, the next section gets hidden underneath the pinned section

Additional Issue

I also tried manually reducing the height of #div1 while the animations are happening (based on the amount of content being removed).

However, when I reduce the height dynamically, it creates a blank space between #div1 and #div2

So I end up with:

• Either extra space (default pin behavior)
• Or layout gaps when manually adjusting height

What is the recommended approach to:

1. Dynamically reduce the height of a pinned section based on content changes
2. Avoid extra spacing caused by pinning
3. Keep the layout behaving naturally with following sections

See the Pen MYjxoMd by anmadwa (@anmadwa) on CodePen.

this.tl.staggerFromTo(this[splitKey], this.duration, { css: { opacity:0, scale:1.3, filter:"blur(10px)", z:0 } }, { css: { opacity:1, scale:1, filter:"blur(0px)", z:0 }, ease:this.easing}, this.stagger[splitKey]);

I have tried all of the following :

- this.tl.progress(1).progress(0); (before playing my timeline)
- z:0.01
- backface-visibility: hidden
- will-change: transform, filter
- -webkit-font-smoothing: subpixel-antialiased
- gsap.set(this[splitKey], { force3D:true })
- Adding a huge delay before the animation starts to prevent overlapping of effects / images loading
- Adding page cache
- Adding a "loader" with a blur animation out to prepare the GPU for the effect, since it seems to run smoothly the second time (didn't work)

See the Pen by (@) on CodePen.

I'm trying to animate page areas to fade in when the page scrolls to them. I've got it mostly working but something is not quite right.

What happens is that there's 8 container elements on the page and the script gets these correctly. The first three or four work, but after that the rest just... don't do anything. Fro some elements the markers show up, but for other elements they don't and for other elements they aren't there at all (or might be hidden under something else).

The JS for this is:

const ANIMATION_DELAY = 0.3;
const ANIMATION_DURATION = 1.2;

let elements = gsap.utils.toArray ('.animate-scroll-fadein');
    
    elements.forEach ((item) => {
        let tl = gsap.timeline ({
            scrollTrigger: {
            trigger: item,
            start: 'top bottom-=50px',
            markers: true
        }
    });
        
    tl.from (item, {
        opacity: 0.3,
        delay: ANIMATION_DELAY,
        duration: ANIMATION_DURATION,
        ease: 'sine.out'
    });

});

Is there anything that I'm missing with this? I feel like I'm doing something wrong.

If needed I can give an example URL where this is used, but I would prefer not to make that public as it's a work thing. :)