Search the Community

Hello, everyone! I’m super new to GSAP and have been trying to recreate this animation for days. I’ve even tried using Claude and ChatGPT, but the results are still not close to what’s in the GIF. Here’s the reference site: https://icggallery.irisceramicagroup.com/en I’m really confused and could use some help. If I at least knew the name of this animation, I could probably find some example code and learn from it—but it seems like there’s nothing like it anywhere!

Hi Everyone, I am trying to use gsap to change a word in a phrase to show other words after one another, like in this example: https://codepen.io/pokecoder/pen/YzxmMrz 1) The code I have now allows me to change it once, how can I add more words to change? 2) How can create a smoother transition/animation when the word changes, like sliding up or down for example? Thanks in advance for you support!

Hi community! I'm very new here and just started learning JS + GSAP. I'm interested in replicating this animation where a user hovers over text, and an image appears. The image follows the mouse path while the user hovers over the text. Demo: https://www.philliplee.co/#home If someone can help me get started even with one example CodePen, that would be great! Can GSAP control the mouse position, or should I use eventListeners & mouseMove? Thank you so much!!

Hey people, Simply, I want to make this text transition, 20240711-0916-21.0398922.mp4 I tried to do it with Flip, but it probably doesn't support text, I tried Flip.fit and it didn't work as well(maybe don't know how to use it) So, is it doable.

In the given example, the jump appears small; however, in my project, with larger font sizes and different fonts, this issue becomes more pronounced. After the animation completes and the new text appears, the text jumps as if it is reverting to its original position.

How can I create this same animation with gsap and next js?

Hello... I'm struggling here with such animation that I can't find a solution with CSS, font-stretch is not a solution in this case. At least, is it possible to achieve in web development? It's stretching letters by different positions and angles. Espcieally it's more visible with letter `E` Any help or suggestions please ?

Hi. Could anyone help me to add animation to horizontal text block I'm trying to do? Like here: https://locomotive.ca/en Latest award section (third section on homepage). So the text is scrolling slowly, depends we scrolled down it go right->left, up it start scrolling left->right. I have done that, but I would like to have like the example above, so it scroll looped (slowly) all the time, and speeds up when user scrolls. Thank you for the help! Thanks, Lukas.

Hi all, I have a working prototype using GSAP SplitText (displayed at the bottom of this post) which stagger-reveals a title, by changing position and opacity of each letter individually. What I'd like to do is mimic the text reveal animation here: http://loveforiceland.com/ which animates each line simultaneously while still stagger-revealing each letter. And the way the letters are revealed are by moving up from behind a kind of mask instead of fading in by animating the letter's opacity. This example gets close: https://codepen.io/camcgreen/pen/qBqMPQp but reveals each line as a whole instead of letter-by-letter. Additional requirements: 1. <a> tags be preserved in the title (as they are in my prototype) 2. The title must be responsive which I imagine means the initial markup can't be grouped by line since line breaks will depend on screen width. Is this possible with GSAP? Thanks!

Hi guys, I'm trying to make this text animation like this page: https://s.muz.li/MGI3NjRkZjJl Every single scroll and this text in circle will scroll too. But I don't have any idea how do make this. How to trigger scroll slide, and every slide change, text in circle scroll. Sorry for my bad English and thank you all for read topic ❤️

Good day, I want to create a text reveal animation as shown on the codepen as a scrolltrigger. To have the animation starts when the trigger reached the middle of the screen when scrolled. Can someone help me?

Hi Devs, I don't know what's wrong in my code , the animations are super slow in firefox and sometimes in chrome as well. I have two issues Translating animations are super slow in firefox and sometimes in chrome Text animations are flickering on scroll I use SVG as react components Can u guys please help me improve my code. Im using NextJs and GSAP3. Thanks. let timeline = gsap.timeline({ delay: tableAndAbove ? 0.5 : 0, scrollTrigger: !tableAndAbove && { trigger: "#sellersLandingMobileContainer", start: "30% 20%%", }, }); if (tableAndAbove) { timeline.from("#sellersLandingMobile", { duration: 1, scale: 0.8, autoAlpha: 0, rotation: 0.01, }); timeline.from( "#sellersLandingMobile", { duration: 1, translateX: "20%", ease: "expo.out", rotation: 0.01, }, "-=0.6" ); } timeline.to( "#sellersLandingHeroText .hide-text", { duration: 0.8, ease: "expo.out", translateY: 0, delay: 0, autoAlpha: 1, rotation: 0.01, }, "-=0.9" ); timeline.from( "#sellersLandingCTA", { duration: 0.5, ease: "expo.out", scale: 0.5, autoAlpha: 0, rotation: 0.01, }, "-=0.5" ); document.querySelectorAll("#sellersLandingStoreLink").forEach((el) => { timeline.from( el, { duration: 0.5, ease: "expo.out", translateY: 20, autoAlpha: 0, rotation: 0.01, }, "-=0.3" ); }); const images = [ "#sell24By7Img", "#chatBroadcastInvoiceImg", "#lightningfastpaymentsImg", ]; const sections = [ "#sell24By7TextContainer", "#chatBroadcastInvoiceTextContainer", "#lightningfastpaymentsTextContainer", ]; useScroll(); useEffect(() => { gsap.to("#punchGrowthHeading .hide-text", { scrollTrigger: { trigger: "#punchGrowthHeading", start: "top 80%", }, duration: 1, ease: "expo.out", translateY: 0, rotation: 0.01, }); images.forEach((el, index) => { gsap.from(el, { scrollTrigger: { trigger: el, start: "30% 80%", }, duration: 1, ease: "expo.out", autoAlpha: 0, transform: `translate3d(${index === 1 ? 100 : -100}px, 0, 0)`, perspective: 1000, rotation: 0.01, force3D: true, }); }); sections.forEach((el) => { gsap.to(`${el} .hide-text`, { scrollTrigger: { trigger: el, start: "30% 80%", }, duration: 1, ease: "expo.out", translateY: 0, rotation: 0.01, }); gsap.from(`${el} p`, { scrollTrigger: { trigger: `${el} p`, start: "30% 80%", }, duration: 1, ease: "expo.out", autoAlpha: 0, }); });

Hi, I'm trying to figure out how to achieve the text reveal animations this site uses. I feel like it should be fairly easy to do, but I haven't found any helpful tutorials to start from.

I've been able to resolve this issue in the past by using rotation: 0.01, using x or y rather than left or top as well as force3d, etc. Can't figure out why this animation seems to jump forward every so often. I'm using this animation setup to allow export to MP4 and even stepping one frame at a time to capture the canvas shows the jerkiness even more. It's not consistent so obviously has to do with browser performance. I just can't figure out what to do to resolve it. Any ideas? Anyone?

Can not this form be expressed in tweenmax? http://codepen.io/nathantaylor/pen/WowbBE http://codepen.io/equinusocio/pen/KNYOxJ I followed them alike. But the box shadow repeats twice. My codepen.