So I am using something like this:

const wordAnimationSetup = { xPercent: 5, autoAlpha: 0};//for this I use gsap.set(elements, wordAnimationSetup);
const wordAnimationIn = {xPercent: 0, stagger: 0.1, duration: 0.15, ease: "circ.out", autoAlpha: 1};

const wordAnimationOut = {xPercent: -5, stagger: 0.1, duration: 0.15, ease: "circ.in", autoAlpha: 0};
//then I move things in and out using tl.to(elements, wordAnimationIn, "+=0.5"); 

Now the problem is that there is a small fade whenever things appear.  I want them to show up THEN slide into position.

I guess I could use tl.set(elements, {autoAlpha: 1} but it does not work with staggers because ALL elements show up and then 1 by 1 slide into position.

I basically want to stagger the display/visibility and then do the animation per element.

Any ideas?

I created an animation where the image shrinks and text comes in from the left, right, and bottom. However, when the text length changes, they don’t come in from the left and right at the same time. I have to manually adjust the left/right values.

Is there a way to make the text come in from all sides simultaneously regardless of its length? Also, how can I make this animation responsive? Right now, when the text scales down, there are some issues like elements overlapping.
 

Image

See the Pen ZYBYwRj by ijgxmufp-the-sans (@ijgxmufp-the-sans) on CodePen.

How we can create a smooth animated color gradient transition between one section and another like this?

yoyo works well but I can't make the loop infinite

Any advice ?
 

See the Pen raMReMG by fripi (@fripi) on CodePen.

My team's encountered a strange issue with SplitText unable to manipulate the DOM when the banner. The banner animates as expected when viewed on it's own, but once it's loaded into an <ft-richload> element I see  "GSAP target not found."  errors in the console and no text animation. The fonts are preloaded using webfont.js. I assume this is a scope issue between the ft-richload and SplitText. 

I've attached a demo.

SpTxt_Troubleshooting.zip

So I just received confirmation that they have put 3.14.1 on their CDN:

https://media.adrcdn.com/scripts/external/greensock/3.14.1/CSSRulePlugin.min.js
https://media.adrcdn.com/scripts/external/greensock/3.14.1/CustomBounce.min.js
https://media.adrcdn.com/scripts/external/greensock/3.14.1/CustomEase.min.js
https://media.adrcdn.com/scripts/external/greensock/3.14.1/CustomWiggle.min.js
https://media.adrcdn.com/scripts/external/greensock/3.14.1/Draggable.min.js
https://media.adrcdn.com/scripts/external/greensock/3.14.1/DrawSVGPlugin.min.js
https://media.adrcdn.com/scripts/external/greensock/3.14.1/EasePack.min.js
https://media.adrcdn.com/scripts/external/greensock/3.14.1/EaselPlugin.min.js
https://media.adrcdn.com/scripts/external/greensock/3.14.1/Flip.min.js
https://media.adrcdn.com/scripts/external/greensock/3.14.1/GSDevTools.min.js
https://media.adrcdn.com/scripts/external/greensock/3.14.1/InertiaPlugin.min.js
https://media.adrcdn.com/scripts/external/greensock/3.14.1/MorphSVGPlugin.min.js
https://media.adrcdn.com/scripts/external/greensock/3.14.1/MotionPathHelper.min.js
https://media.adrcdn.com/scripts/external/greensock/3.14.1/MotionPathPlugin.min.js
https://media.adrcdn.com/scripts/external/greensock/3.14.1/Observer.min.js
https://media.adrcdn.com/scripts/external/greensock/3.14.1/Physics2DPlugin.min.js
https://media.adrcdn.com/scripts/external/greensock/3.14.1/PhysicsPropsPlugin.min.js
https://media.adrcdn.com/scripts/external/greensock/3.14.1/PixiPlugin.min.js
https://media.adrcdn.com/scripts/external/greensock/3.14.1/ScrambleTextPlugin.min.js
https://media.adrcdn.com/scripts/external/greensock/3.14.1/ScrollSmoother.min.js
https://media.adrcdn.com/scripts/external/greensock/3.14.1/ScrollToPlugin.min.js
https://media.adrcdn.com/scripts/external/greensock/3.14.1/ScrollTrigger.min.js
https://media.adrcdn.com/scripts/external/greensock/3.14.1/SplitText.min.js
https://media.adrcdn.com/scripts/external/greensock/3.14.1/TextPlugin.min.js
https://media.adrcdn.com/scripts/external/greensock/3.14.1/gsap.min.js

What I need is guidance on how to rebuild and replace the SVG path points using GSAP’s attr: { d: "" } to achieve that smooth, responsive deformation like Zentry’s effect. Any examples or references would be greatly appreciated.

after scroll-triggered:

Link: https://codesandbox.io/p/devbox/8zwqsw

I’m animating an SVG where a few arc segments rotate around a center (think accent “glow” lines). I have several dots placed on the same circle, and I’d like each dot to change fill exactly while the line passes over it. Ideally, the dot’s color matches (or approximates) the line’s stroke gradient at the point of intersection (like changes from purple to white). Is this possible with GSAP? Maybe you can give me some hints about it? 🙏 

Huge thanks in advance for any guidance or examples! 🫂

See the Pen GgorOmp by Anka_shhhh (@Anka_shhhh) on CodePen.

Click-through Tag Requirements

a#myAdLink {
display: inline-block;
background-color: #000000;
}

<a id="myAdLink" href="javascript:window.open(window.clickTag)">

var clickTag = "http://www.google.com"; 

<meta name="click.through" content="cta_1">

I’ve built a GSAP animation that works perfectly on Android devices and all laptops (Windows/macOS), but I’m experiencing noticeable lag when viewing it on iPhones and iPads.

I've tried common optimization tips like will-change, reducing repaints, and simplifying the animation logic, but the issue persists on iPhones and iPads.

Has anyone else faced this issue or have suggestions on how to optimize GSAP animations specifically for iOS performance? Any guidance would be greatly appreciated!

Thanks in advance!

— Tirthesh Motiwala

gsap.registerPlugin(ScrollTrigger)
    const tl = gsap.timeline({
      scrollTrigger: {
        trigger: '.section',
        markers: true,
        pin: true, // pin the trigger element while active
        start: 'top top', // when the top of the trigger hits the top of the viewport
        end: 'bottom top', // end after scrolling 500px beyond the start
        scrub: true
      }
    })

    tl.to('.text-1', { x: -400 });
    tl.to('.text-2', { opacity: 1 }, "<");
    tl.to('.text-2', { opacity: 0 }, "text2");
    tl.to('.text-3', { opacity: 1 }, "<");
    tl.to('.text-3', { opacity: 0 });
    tl.to('.text-4', { opacity: 1 }, "<");

    const tl2 = gsap.timeline({
      scrollTrigger: {
        trigger: '.section',
        start: 'top top', // when the top of the trigger hits the top of the viewport
        end: 'bottom top', // end after scrolling 500px beyond the start
        scrub: true
      }
    })
    tl2.to('.overlay', { opacity: 0.2 })

    gsap.timeline()
            .add(tl)
            .add(tl2)

See the Pen XJmRYKP by Kotomi-Ichinose (@Kotomi-Ichinose) on CodePen.

I need to create a visually engaging parallax effect for the "Process" section of a website. The flow should have the following steps, each with its own parallax scroll transition:

1. First Section: Defining the Scope

   • The first section should appear with a smooth scrolling effect that reveals a document or paper with the title "Defining the Scope." This section should give the impression of research, planning, or ideation, with text or visual elements gradually becoming visible as the user scrolls down. The background could feature soft, abstract shapes or diagrams to emphasize the planning phase.

2. Second Section: UI/UX Design

   • On scroll, the second section should come into view, showcasing UI/UX design. This section should display a video or animation of a designer working on Figma, creating wireframes, prototypes, or mockups. The video should seamlessly transition in sync with the scroll and blend well with the rest of the design. The background can feature design elements like grids, color palettes, or interface components.

3. Third Section: Writing Code

   • As the user continues scrolling, the third section should reveal a code editor interface showing developers writing code. The code could appear dynamically, with text and snippets being typed out or changed as the user scrolls. This could simulate the coding process and give a sense of progression. The background can feature tech-oriented visuals, like snippets of code or server-side images.

4. Fourth Section: Product Ready to Launch

   • On the final scroll, the section should show the culmination of the process: the product is ready for launch. This could be represented by a clean product page with visuals of the final product (such as an app or website) and an animation of a "Launch" button being clicked. The background can use bright, energetic visuals to signify success, completion, and excitement.

Technical Requirements:

• Each section should smoothly transition based on the user’s scroll.

• Parallax effect should create a sense of depth as elements move at different speeds.

• Ensure the design is responsive across different screen sizes.

• Use subtle animations and transitions for visual appeal without being too distracting.

I need to make transitions of 3 "blobs", each has a different form and his own gradient.

I don't know if it is possible to make such a complex morph, I've been trying the whole afternoon, something moves but it doesn't morph...

Does someone have an idea ?

Thanks

See the Pen raVjWEo by fripi (@fripi) on CodePen.

See the Pen ByNWYEL by eduwhite (@eduwhite) on CodePen.

Hi all,

I’ve created some GSAP-based ads that will be published and run by an agency through Google DV360. These ads are composed of static images with basic animations, and I haven’t included an Enabler.js file, as I understood it’s typically used for rich media functionality.

Since this is my first time preparing creatives for DV360, I’d really appreciate any guidance you can offer. Are there any additional files or specific code requirements I should be aware of to ensure proper compatibility and tracking?

Thanks in advance for your support!

Best regards,

index.html script.js style.css

See the Pen OPJqVMg by rafik-outside (@rafik-outside) on CodePen.

If you look at it you'll see that the outside is gray and the 'page' is light blue.

I need the login fly in to come from the right top but I don't want it to fly into the gray area, I want it to fly directly into the right side of the blue div.
I wanted to just use css but I can't see how to do it.
Can you help?

I have been working on some banners over the past few days. I have setup an init() function which positions all of the animated images and text (which looks like this):

        function initCSS() {

            TweenLite.set(("#intro"), {y: 380}),

            TweenLite.set(("#titleHolder"), {x: -200}),

            TweenLite.set((".t-2"), {x: -200}),

            TweenLite.set(("#product1"), {x: -200}),

            TweenLite.set(("#product2"), {x: -200}),

            TweenLite.set(("#cta"), {x: -200})
        }

GS is brought in at the top of the HTML file and the external JS GS stuff at the bottom.

When the banner is very first loaded all of the stuff which animates above is all out of position and flickers. Its as if the init() is taking a few milliseconds to kick in so its falling back on the standard css for positioning. Text and images are all overlapped etc.

What is the best way to prevent this happening?

Cheers,

Ste

I was doing this pinned scrubbed animation that should play only once when going down, I have achieved this by doing this:

scrollTrigger: {
  onLeave: function (self) {
    let start = self.start;
    self.scroll(self.start);
    self.disable();
    self.animation.progress(1);
    ScrollTrigger.refresh();
    window.scrollTo(0, start);
  },
}

this makes the animation play only one time but disables all of the animation done by aos for all sections that comes after this timeline.

And also suggest me a better way to go to specific scroll position to scroll when clicking on the steps button. Currently I have done this by getting scroll position with the help of getScrollPosition() helper function that I got from GSAP docs and adding it to scroll the window like this:
 

const scrollPoints = [3100, 3880, 4650, 5400, 6213, 7100]; // scroll point got from getScrollPosition
function goToStep(index) {
	gsap.to(window, {
		scrollTo: {
			y: scrollPoints[index],
			autoKill: false,
		},
		duration: 0.5,
		ease: "none",
	});
}
steps.forEach((button, index) => {
	button.addEventListener("click", () => goToStep(index));
});

😅 and lastly, how  to optimize this animation mobile responsive, I have already done this with gsap.matchMedia(), but for some reason it scroll 2 sections at a time. Sorry, but I haven't included this code in codepen.

 

function setupAnimations() {
	const container = document.querySelector(".group #our-process");
	const breakPoint = 560;
	const breakPointDesktop = 770;

	mm.add(
		{
			isTablet: `(min-width: ${breakPoint}px)`,
			isMobile: `(max-width: ${breakPoint - 1}px)`,
			isDesktop: `(min-width: ${breakPointDesktop}px)`,
		},
		(context) => {
			const { isTablet, isMobile, isDesktop } = context?.conditions;
			const containerGroup = document.querySelector(
				".process-step-wrapper-group"
			);
			let width = window.innerWidth;

			window.addEventListener("resize", () => {
				width = window.innerWidth;
			});

			if (isDesktop) {
				createStepCounterAnimation();
				createProcessTimeline(container, sortedList, devfinityLogo);
			} else {
				gsap.to(processList, {
					scrollTrigger: {
						trigger: containerGroup,
						start: isTablet ? "top top+=4%" : "top top+=10%",
						// end: "+=3500",
						end: () => `+=${containerGroup.offsetWidth}`,
						markers: false,
						scrub: 1,
						pin: true,
						smoothChildTiming: true,
						toggleActions: "play none none reverse",
						// onUpdate: function ({ progress, animation }) {
						// 	// get the required scroll position
						// 	getScrollPosition(animation, progress);
						// },
						snap: 1 / (processList.length - 1),
						// snap: [2947, 3688, 4468, 5240, 5995, 6446],
					},
					duration: 2,
					xPercent: -100 * (processList.length - 1),
					ease: "none",
				});
			}
		}
	);
}

Thank you in advance, 👍🏽

See the Pen oNKQjOY?editors=1111 by sagarkhadka (@sagarkhadka) on CodePen.