Search the Community

Hello everyone, I have the problem you can see on the video. When i pause the game the snake segments are correctly positioned, but when its running and a movement is made the segments are washing and not synced correctly. If i remove the duration the snake movement starts to be laggy and it is not smooth. At codepen i uploaded render.js as a HTML, main.js where we use ticker to init the game start as CSS and snake.js as JS where we care about the snake animations. Untitled22.mov

I have attached a simple recreation of the bug that I'm facing, there is a much more complicated timeline so cannot shift to CSS only animation. As you can see in the demo, rotation works perfectly fine with gsap, but css transforms it, without considering the transform, is there any way I can "apply" the gsap transforms as CSS at the end of the timeline and just remove all the previous gsap effects? Anyways, would separate infinite gsap timeline be less efficient than an infinite CSS animation? cuz that would be a lot simpler to apply.

Hey all! This feels like it should be simple enough to do and yet I can't figure it out or find an answer in the forums. When you scroll down, the bars scale up until they reach their full height at the end of the 'body'. What I want to simply do is have them 'stagger' on scrub, or if you will, each bar, starting from the left one, begins to scale up only when the previous bar has finished. I can imagine doing this with a scrubbed timeline, but is there an easier way?

I don't have a working example, as I just NPMd 3.0 and grabbed the 149/year club a couple hours ago. I'm used to framer / motion.react. I'm looking for... A rubber duck. Attached is a simple Google searched SVG pitch fork. The best way I can describe my drawing is: flip this 180 and attach another fork on each end. Ok, so. I'm a developer, and i would rather start off the right way vs trial and error. Abstraction is my thing. I wish there was a visual editor, but I can f5 my way to success in NextJS. For the project: think 100 lines, 8k pixels height easy. I'm only using lines, and here are my immediate questions-- Where should I break the lines on the fork? (Handle, edge, 4 prongs? 1 center line and start the prongs when they hit?). Do you need to mask? How would I start the animations of each prong at the same time when the handle is finished? How do I get a consistent draw speed/flow in varying length lines? I'm not drawing a maze, but that's another way to think about it. I'm interested in the approach more than a codepen, but I wouldn't say no to one. Like.. fromTo vs to and all this new stuff.

Hi everyone, I'm facing an issue occasionally, and it's a bit challenging to reproduce reliably in a CodePen due to the complexity of my setup. The issue occurs with dynamic content. Sometimes a part of a GSAP timeline is skipped. Specifically, I notice that the fromTo animations are occasionally stuck in the "to" state, while the rest of the timeline continues as expected. There’s no warning in the console from GSAP, and there are no errors about missing elements. The strange thing is that this mostly happens with WordPress menu items that come in dynamically, which leads me to suspect a timing issue with when the elements are loaded. I tried logging the elements to the console before creating the timeline, and they were all present as a NodeList. Yet, the issue persists. As I mentioned, sometimes it works perfectly fine. I managed to solve this with a slight artificial delay using setTimeout, which seems to allow the timeline to work every time. Interestingly, using GSAP's delay property didn't make a difference. However, using setTimeout feels hacky and unreliable, and I'm hoping there’s a better, more elegant solution. Setup: WordPress website JavaScript: ES6 Modules (using imports/exports) Build Tool: Webpack Has anyone faced similar issues with dynamic content in timelines, especially with WordPress or other dynamically generated content? Are there any best practices in GSAP for handling timing issues with dynamic elements, especially without resorting to setTimeout hacks? I believe this is a broader topic, as I've noticed the same problem in other projects as well. Any advice or insights are greatly appreciated. Thanks in advance!

https://codepen.io/leandrobarbosafr/pen/XWvvbWY Timeline animated with GSAP, HTML, CSS and JS

Good day! I was testing some gsap features, and tried to create infinite text swapping animation. But when sometimes I need to smoothly force change text. I am getting bugs. So: I have such method: protected createAnimationTimeline(): void { this._animationTimeline?.kill(); this._animationTimeline = new TimelineMax({ repeat: -1, repeatDelay: this._animationParams.delayBetweenTextsSwap }) .to(this.placeholderText, this._animationParams.duration, { alpha: 0 }) .add(() => this.swapText(), "swapTextLabel") .to(this.placeholderText, this._animationParams.duration, { alpha: 1 }) .play(); } and protected forceSwapText(): void { this._animationTimeline.tweenTo("swapTextLabel"); } _____________________CASE_ONE____________________________ when _animationTimeline moves from this part: .to(this.placeholderText, this._animationParams.duration, { alpha: 0 }) to .add(() => this.swapText(), "swapTextLabel") ___________________________________________________________ - >>>>>>>>>> forceSwapText calls -> everything is ok -> this.swapText() will be inited. But for case ____________________CASE_TWO____________________________ when _animationTimeline moves from this part: .add(() => this.swapText(), "swapTextLabel") to .to(this.placeholderText, this._animationParams.duration, { alpha: 1 }) ___________________________________________________________ - >>>>>>>>>> forceSwapText calls -> moving animations play backwards -> this.swapText() will be not inited. QUESTION: How to make tweenTo("swapTextLabel") always use callback (regardless movement is normal or backwards) ? Thanks a lot, if someone could help me even iwth hint.

Hi, I have two GSAP timeline animations on the website https://4elements.t-k.dev/. One on the video of featured project section, and one on the panels for the white papers section. It works fine on other browser, but on Safari there is some glitch, flickering, and other issues (The issue in the video: https://drive.google.com/file/d/1b5sgH4aBfAlS6hxYrfc_pMBS9hI1hjM2/view?usp=sharing). Thank you in advance! video-animation.js stack-animation.js

Hello Guys, I was searching for a draggable marquee effect when I stumbled upon this code pen. This is exactly what I need but I want a marquee effect applied to it which runs in a seamless loop. I tried adding it from my end but it does not work. Please help me Thank You

Hi Guys, Hope you are doing good. I am facing issue while using scroll trigger when section is 100Vh or any height section as soon as timeline reach 100 percent or animation completed it start scrolling to next section so in my case if i have to show the slider when animation completed over the box element then its already scroll. If there is any way where can add 2-3 free scroll which will do nothing but stay the section there after timeline complete so any slider or other which will be shown on complete of animation is visible. Any help or suggestion will be very helpful.

Hi all! I know about fromTo, but it`s not working as i expect. I have a code let coinTimeline = gsap.timeline(); coinTimeline.to(movableCoin, { duration: 3, motionPath: { path: bezierToMove, autoRotate: true, align: movableCoin, alignOrigin: [0.5, 0.5] }, repeat: -1, ease: "power1.inOut" }); coinTimeline.fromTo(movableCoin, {opacity: 0}, { duration: 1, opacity: 1 }, 0); And the opacity changing is only in first repeat of animation. Each next time the coin starts from opacity 1. How can I fix that and start it from 0 every time?

Hello everyone, Im new to Gsap, I'm trying to learn it. but right now I'm stuck at creating a vertical animated Timeline. i also applied scrollTrigger but my code is messed up!. Please look at my code. once and correct my mistake. This is what i want to make :- https://youtu.be/qTeqwp7Uvro and this is my code pen:- https://codepen.io/Mohit-Mishra-the-looper/pen/abggwpx?editors=1000 what i want is that. 1. when user scrollDown the height of the ".timeline-inner" will increase. and when the ".timeline-inner" hits the ".dot" of the specific box then the opacity of that's h2 and paragraph become 1

Hello GSAP community! I'm trying to animate text and svgs but I don't know why this is not looking great! what I'm trying is to do simillar to gsap home page text animations but not exact same (refer to attached img). so i want to animate ADS word with svgs so each word will go down and svg will come in place with some animation but couldn't figure it out, how do i do it! Please help me out!

Hello everyone. I have an array with text, using position fixed in the upper right corner of the screen and when scrolling to the desired section, I need to show new text, hiding the old one with animation. I did this, but the problem arises that when changing the browser window, everything breaks. Help me with this, please, and how can I optimize this solution? This is a code snippet, because further it is the same (p.s. I don't use useGsap because it breaks animation in production deployment of NExtJS) https://stackblitz.com/edit/stackblitz-starters-h6deec?file=app%2Fcomponent.tsx const TEXTS_FOR_DESKTOP = [ '2024', 'Finance', 'Reward', '2000', '2008', '2015', '2017', '2020', '2023', ] const titleRefs = useRef<(HTMLDivElement | null)[]>([]) const translateToY = -150 useEffect(() => { const mm = gsap.matchMedia(); const splittedText = titleRefs.current.map( (item) => new SplitText(item, { type: "chars" }) ) mm.add( { isTablet: '(min-width: 834px) and (max-width: 1509px)', isDesktop: '(min-width: 1510px)', isExtraSmallMobile: '(max-width: 833px)', }, ctx => { const {isDesktop, isTablet, isExtraSmallMobile} = ctx.conditions! if (isDesktop) { const groups: gsap.DOMTarget[] = gsap.utils.toArray('.trigger') splittedText.forEach((t, i) => { if (i > 0) { gsap.set((t as any).elements[0], { yPercent: 150, position: 'absolute', top: 0, left: 0, width: '100%', }) } }) // 2024-finance gsap.timeline({ scrollTrigger: { invalidateOnRefresh: true, trigger: groups[0], start: 'top top', id: `anim_${0}`, end: '+=260px', // markers: true, scrub: 1, }, }) .to(splittedText[0].chars, { yPercent: -300, ease: 'power2.in', duration: 2.5, stagger: {from: 'end', amount: 0.6}, }) .to( splittedText[1].chars, { yPercent: translateToY, ease: 'power2.in', duration: 2.5, stagger: {from: 'end', amount: 0.6}, }, '<-0.3' ) // finance-reward gsap.timeline({ scrollTrigger: { invalidateOnRefresh: true, trigger: groups[1], start: 'center top', end: '+=500', id: `anim_${1}`, // markers: true, scrub: 1, }, }) .to(splittedText[1].chars, { yPercent: -300, ease: 'power2.in', duration: 2.5, stagger: {from: 'end', amount: 0.6}, }) .to(splittedText[2].chars, { yPercent: translateToY, ease: 'power2.in', duration: 2.5, stagger: {from: 'end', amount: 0.6}, scrollTrigger: { invalidateOnRefresh: true, trigger: groups[1], start: 'center top', end: '+=500', id: `anim_${1}`, // markers: true, scrub: 1, }, }) // reward-2000 gsap.timeline({ scrollTrigger: { invalidateOnRefresh: true, trigger: groups[2], start: '-300 top', end: '+=200', id: `anim_${2}`, // markers: true, scrub: 1, }, }) .to(splittedText[2].chars, { yPercent: -300, ease: 'power2.in', duration: 2.5, stagger: {from: 'end', amount: 0.6}, }) .to(splittedText[3].chars, { yPercent: translateToY, ease: 'power2.in', duration: 2.5, stagger: {from: 'end', amount: 0.6}, scrollTrigger: { invalidateOnRefresh: true, trigger: groups[2], start: '-300 top', end: '+=200', id: `anim_${2}`, // markers: true, scrub: 1, }, }) } } ) }); <div className='fixed right-0 top-0 z-[-1] hidden h-[120px] w-full flex-col gap-[2px] overflow-hidden text-right uppercase 834:flex desktop:h-[200px]'> {TEXTS_FOR_DESKTOP.map((text, index) => ( <div key={index} className={`fluid-text flex items-center justify-end gap-1 font-[500] 834:leading-none`} ref={el => { titleRefs.current[index] = el }} > {text} </div> ))} </div>

Hello I want to make vertical text slider. I read old post and try to make something but end of lood it shows empty line then restart again. how can i make this slider without empty state gap? blank part:

Hey GSAP Team, I am trying to achieve an animation where on page load, initial sequence of images are played and only after that scroll should be enabled and scroll trigger should take over and play sequence of image on scroll. I am able to achieve the first part of playing image sequence on page load, but stuck on the second part. Can you please nudge me in the right direction 🙏 Thanks. Below is my Vuejs code <script> import { gsap } from 'gsap' export default { data() { return { canvas: null, context: null, images: [], images2: [], frames: { currentFrame: 0 }, frames2: { currentFrame: 64 } } }, mounted() { this.initializeCanvas() this.loadImages() this.initializeAnimation() }, methods: { initializeCanvas() { this.canvas = this.$refs.canvas this.context = this.canvas.getContext('2d') }, getFrameURL(index) { return `http://localhost:5173/demo-${(index) .toString() .padStart(4, '0')}.png` }, loadImages() { for (let i = 0; i < 64; i++) { const img = new Image() img.src = this.getFrameURL(i) this.images.push(img) if ( i === 0) this.render() } for (let i = 64; i < 300; i++) { const img = new Image() img.src = this.getFrameURL(i) this.images2.push(img) } }, initializeAnimation() { const tl = gsap.timeline() tl.to(this.frames, { currentFrame: 64 - 1, snap: 'currentFrame', ease: 'power1.inOut', duration: 2, onUpdate: this.render }) tl.to(this.canvas, { y: 400, duration: 2, onComplete: () => { this.canvas.classList.add('canvas-moved') } }) tl.to(this.frames2, { currentFrame: 299, snap: 'currentFrame', ease: 'power1.inOut', scrollTrigger: { trigger: '.canvas-moved', start: 'top top', end: '+=300%', scrub: 1, markers: true }, onUpdate: this.render2 }) }, render() { this.context.clearRect(0, 0, this.canvas.width, this.canvas.height) const img = this.images[this.frames.currentFrame] const scale = Math.min(this.canvas.width / img.width, this.canvas.height / img.height) this.context.drawImage(img, 0, 0, img.width * scale, img.height * scale) }, render2() { this.context.clearRect(0, 0, this.canvas.width, this.canvas.height) const img = this.images2[this.frames2.currentFrame - 64] console.log(this.frames2.currentFrame) console.log(img) const scale = Math.min(this.canvas.width / img.width, this.canvas.height / img.height) this.context.drawImage(img, 0, 0, img.width * scale, img.height * scale) } } } </script> <template> <div class="canvas-container"> <canvas ref="canvas" width="1560" height="1040" /> </div> </template> <style scoped> .canvas-container { position: relative; width: 100%; height: 100vh; overflow: hidden; z-index: 10; } canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; will-change: opacity; } </style>

Hello, i found some slider using Gsap but i want to modify it with timelines. My goal is when i start scrolling my slide scroll and set rotation to 0 I tried to combine it with timeline but it jumps or anims end when i didnt scroll yet. Without timeline all of them rotates at the same time.

Hi, I'm working on a website where a large image scales as you scroll. At page load, I want the image to start at 20% scale and be positioned higher on the y-axis so that it's visible in the viewport. While the setup mostly works, I've encountered an issue: when I apply a negative y-position, the scaling no longer happens from the center. https://codepen.io/remcovb/pen/eYwvGqb However, when I remove the negative y-position, the scaling works correctly from the center, but then the image isn't in the viewport anymore. https://codepen.io/remcovb/pen/bGPqoyo Any advice on how to maintain centered scaling while keeping the image in the viewport? Thanks in advance!

Hello, I'm struggling with making my timeline with ScrollTrigger work on resize. It works perfectly every time if I refresh the page, but it doesn't update properly on resize. I have applied both of below: invalidateOnRefresh: true x: () => value(instead of x: value) What am I doing wrong? I am attaching my whole component code (I have just stripped imports). The aim is to simply make it appear as horizontal scroll for the list. I will appreciate any help. Thank you. export function Companies({ data }: { data: Sanity.Company[] }) { const listRef = useRef<HTMLUListElement>(null); const itemsRef = useRef<(HTMLLIElement | null)[]>([]); const tlRef = useRef<gsap.core.Timeline | null>(null); useGSAP( () => { gsap.registerPlugin(ScrollTrigger); const mm = gsap.matchMedia(); mm.add("(min-width: 1024px)", () => { if (!itemsRef.current[0]) { return; } tlRef.current = gsap.timeline({ scrollTrigger: { trigger: listRef.current, start: "bottom bottom", end: `+=3000`, scrub: 2, pin: true, invalidateOnRefresh: true, }, }); tlRef.current.to("li:nth-child(-n + 5)", { y: "0%", stagger: 0.1, duration: 1, }); tlRef.current.to(listRef.current, { invalidateOnRefresh: true, x: () => `-${itemsRef.current[0]?.offsetWidth * itemsRef.current.length - window.innerWidth}`, duration: 4, }); }); }, { scope: listRef } ); return ( <ul className="grid grid-cols-2 gap-x-8 gap-y-24 px-15 pb-52 sm:grid-cols-3 lg:flex lg:w-fit lg:flex-nowrap lg:justify-between lg:gap-0 lg:px-32" ref={listRef} > {data?.map((company, index) => ( <li className={cx(["lg:pr-[7vw]", index < 5 ? "lg:translate-y-full" : ""])} key={index} ref={(el) => { itemsRef.current[index] = el; }} > <Company {...company} /> </li> ))} </ul> ); }

I've been struggling with this code all day. I've tried everything to get the hover effect to work correctly with a .reverse() but this was the closest I could get to it working correctly. Apparently, it works fine when hovering and unhovering the mouse, but if I repeat these actions, the animation freezes or does weird things. How can I fix this, or is there a better way to do this hover animation? I'd appreciate any help.

Hello Guys, Hope you are doing good, i need some help with timeline issue. iam creating a image slider where iam getting issue regarding starting next time line when current timeline is 50% completed. Eg. when slide first is 50% completed then second slide should be started and so on as slider will be worked infinite Thanks a lot for your help !

I want to create animation stack like this section (photo attachment) of the site https://vendredi-society.com/. Does anyone have sample code or something similar? that would help me a lot. Thank you

Hello GSAP community ? I had a problem with the animation being quite light I think xD. But I spent hours and couldn't implement it. I am attaching my codepen so you can see my code: https://codepen.io/ProjectDCL/pen/wvbyXQW I'm creating an animation for a modal window to appear to select the language version of the site. My animation works correctly when opening and closing the very first time, but as soon as I try to open/close my modal window again the animation breaks. I think it has to do with this line of code langContainer = $(this).siblings('.lang-container') I use it because on my site there are several places with a language switch and I don't want them all to open at once. I also need that when a modal window is open, if the user clicks anywhere on the site except the modal window itself, then it closes. Perhaps you have ideas on how this can be done? I tried to simply add a reverse timeline when clicking on a $document, but with this approach it will also capture the modal window. Write if you need more information. I will be incredibly grateful for your help!

I'm trying to implement a GSAP timeline with Locomotive Scroll beta to pin an element while scrolling in a Next.js component. The code works perfectly in a normal HTML and JS environment, but it's not functioning as expected in Next.js. Here is the minimal demo with normal html environment: https://codesandbox.io/p/sandbox/gsap-timeline-forked-3dqjgv?file=%2Fsrc%2Findex.js%3A8%2C18 Here is the Next Js version: https://codesandbox.io/p/devbox/c4cq6q?file=%2Fpin-element%2Fsrc%2Fapp%2FPinComponent.js%3A28%2C11 I'm new to GSAP and I'm looking for assistance to fix the issue.

Greetings! I can't figure out how to implement a random repeatDelay on this simple animation: gsap.timeline({ repeat: -1, repeatDelay: 'random(1, 5)', }) .to('.dot', { ease: 'none', duration: 1, y: '100vh', onComplete() { gsap.set('.dot', { x: 'random(100, 1000)', ease: 'none', }) } }); As you can see, in this simple version of the animation, it's just a dot that starts from random x points at the top and simply falls to the bottom and repeats infinitely. It works fine. But I need the repeatDelay to be random and I thought I could use random for the repeatDelay but I'm obviously doing some wrong...