Search the Community
Showing results for tags 'text'.
-
Hey everyone, Seeking Guidance on a Text Animation Effect I'm working on a text animation where the text is revealed using "X" characters instead of traditional dots or a fade-in effect. Ideally, these "X" characters would be custom-rendered as SVGs. Current Challenges The animation feels too contained—I want it to have a more open and airy feel while keeping the text centered. I need to implement a hover effect where each "X" subtly shifts or moves to add an interactive touch. 🔗 Current Progress: CodePen Demo What I’ve Tried Particles.js seems promising, but I'm still figuring out how to integrate it effectively with text. Someone generously shared some starter code, which I’ve tweaked, but I’m still refining the animation. References & Inspiration Desired Hover Effect: Rosehip Example Similar Animation: Related CodePen Looking for Suggestions Has anyone tackled a similar effect before? Would GSAP or another library be better suited for this animation? Any insights or suggestions would be greatly appreciated! text animation figma.mp4
-
Hello everyone. I need to make an endless running line with gradient text that changes as it moves, like in the example, it works, but there are problems in Safari, everything twitches there and the letters seem to run into each other, maybe you can make exactly the same behavior on gsap, but so that it also works well in Safari, without any animation twitching
-
Hello, I'm trying to create a text effect whose background is a video, and when scrolling down the text grows until it becomes the new screen with the video, I will share the code. I succeeded in the effect I want, which is simply that the text grows and you get the new background. https://codesandbox.io/p/sandbox/new Gaming.jsx Gaming.scss -
Hello, I have two endless loop animations going in different directions, but the animation on the right does not start from the top like the other one and works problematic. Can you help me?
-
hey guys, im trying to recreate this text moving effect from https://clingr.me/ (on third section), there is also a fixed background image scaling effect , i thing im almost done, but its is not smooth at all everything happens so quick, i tried to increasing the end value but not working? https://codepen.io/Rare4pple/pen/eYqREqr?editors=0100
-
Hello All, I'm just learning GSAP. How can I create this https://gsap.com/text/ animation. i've tried but couldn't get what is going on in there. I have refered to existing post of communties but still no idea.
-
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, I have a problem with ScrollTrigger. I want to achieve a similar effect to what you see on this page: Julian Fella in the section where the text "I HELPED COMPANIES GENERATE" appears. Currently, my container is pinned at the bottom, and the animation starts too early. I’m unsure how to delay it. Could you help me with this issue?
-
When i enable pin on my text reveal, it just jumps to the bottom
hdjdgskshdjdnfkshshd posted a topic in GSAP
Hello there, at first it works good, but after i enable pin it just jumps to the bottom and only works when scrolling back up, how can i pin it the same position and after the revealing is done, and then i can scroll pass that, thank you in advance, i attached a video (sorry for the compression, 1mb limit) const About = () => { gsap.registerPlugin(useGSAP,ScrollTrigger); const text = new SplitType('#target') gsap.from(text.chars, { scrollTrigger: { trigger: "#target", start: 'top 70%', end: 'top 00%', scrub: true, pinSpacing: false, markers: false }, opacity: 0.1, y: 20, stagger: 0.01 }) return ( <div className='about content-center items-center text-center overflow-hidden py-12 p-5 lg:px-72'> <p id='target' className='lg:text-5xl text-3xl font-bold text-neutral-200'> I’m Dilukshan, a fullstack web developer from Sri Lanka with a passion for creating dynamic and engaging digital experiences. </p> </div> ) } Desktop 8-6-2024 1-34-01 Am (2) (2) (2) (2).mp4 -
Hello Guys, i found a Site with a really nice effect on it. https://www.mech-human.com/ Someone of you know how to get it to work ? I have abosluty no Idea .. I want to do a scroll into Text and reveal the Section behind. Thank you 😃
-
I recreated initial text reveal animation from AROCK’s website and am pleased with the result. Any thoughts on optimization or suggestions for improvement? Do you think their approach was similar?
-
Hello everyone!? I'm new on GSAP so it's possible that my problem is "normal" but I'm currently preparing my portfolio and for the "about" part I wanted to put a text animation on the scroll! In order to reveal the text when scrolling... But unfortunately since today the GSAP animation doesn't work... I tried to go back to previous versions of my site but nothing... Strangely enough, since yesterday everything was working properly on any support or browser, but since today... I've been having major problems even though I haven't really touched anything. I'm putting the code here and I'd like to thank you very much for your help, as I have the impression that it's a bug linked to the CDN...is there a way of correcting the bug or should I wait? https://codepen.io/GreenSock/pen/aYYOdN <script src="https://unpkg.com/split-type"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/ScrollTrigger.min.js"></script> <script> let typeSplit = new SplitType('[animate]', { types: 'lines, words, chars', tagName: 'span' }) gsap.from('[animate] .word', { opacity: 0.3, duration: 0.03, ease: 'power1.in', stagger: 0.03, scrollTrigger: { trigger: '[animate]', start: 'top 120%', end: 'bottom 110%', scrub: true, } }) </script>
-
Hello, Can we do a blur on a text fadein with GSAP? So from 100% bur to 0% Best.
-
Use Scroll Trigger to split text on page scroll with different background colors
Lopdog posted a topic in GSAP
Greetings all! I'm a scripting noob-uh that needs some guidance. I have the animation up and running for all-black text on a white background. I need to do the same for white text on a black background. Below is what I have so far. Any help in understanding the script needed to make this work is greatly appreciated. The website. gsap.registerPlugin(ScrollTrigger); const splitTypes = document.querySelectorAll(".text-split"); splitTypes.forEach((char, i) => { const bg = "#F1F1F1"; const fg = "#000000"; const text = new SplitType(char, { types: "chars" }); // Update on window resize let windowWidth = $(window).innerWidth(); window.addEventListener("resize", function () { if (windowWidth !== $(window).innerWidth()) { windowWidth = $(window).innerWidth(); typeSplit.revert(); runSplit(); } }); gsap.fromTo( text.chars, { color: bg }, { color: fg, duration: 1, stagger: 1, opacity: 1, scrollTrigger: { trigger: char, start: "top 80%", end: "top 35%", scrub: true, markers: false, toggleActions: "play play reverse reverse" } } ); }); -
Hello, I am tring to recreate one of the animation from this link https://qwery.ancorathemes.com/marquee-text/ while scrolling the text appears fron right to left and at the same time each letter appears from the bottom I tries to make a demo but the text shows small https://stackblitz.com/edit/stackblitz-starters-xpqpr5?file=app%2Fpage.tsx What have I done so far? the text show smoothly from the right while scrolling with this code useGSAP(() => { if (texto.current) { const text = new SplitType(texto.current, { types: "chars" }); // gsap.from(".char", { // y: 500, // stagger: 0.5, // delay: 0.1, // }); } gsap.to(texto.current, { xPercent: -100, ease: "none", scrollTrigger: { trigger: container.current, pin: true, scrub: 3, markers: true, start: "10% top", }, }); }); then, with the commented function gsap.from(".char", { y: 500, stagger: 0.5, delay: 0.1, }); more or less the animation for the text to appear from the bottom works but a the same time until it ends a seccond scrollbar appears, and dissapear when the animation ends gsap.from(".char", { y: 500, stagger: 0.5, delay: 0.1, scrollTrigger: { trigger: container.current, scrub: true, pin: true, markers: true, }, }); and if i add the scroll trigger it jsut doesn´t work as i want I also tried with a "forEach" for the individial letters vut didn´t work i can´t find a similar animation within the demos, I hope someone can give me a hint at last Thank you!
-
Cursor spotlight that removes fill color and outlines certain part of text on hover
TomasKrida posted a topic in GSAP
Hello, I've seen this effect on few websites -> cursor has a transparent radius around itself, that when it hovers over a text, the part of text that is "inside" the radius loses it's fill color and only outline remains. I am a somewhat of a beginner, and I am very curious how this works because I'd love to implement it myself. If there is someone that could atleast point me in right direction, to help me figure this out I'd be very thankful. I've also found codepen that is kinda similiar but the principle is a bit different, to my understanding it can only be used on a flat color background, but on the websites that are linked below, this effect is used with picture/photos as background. Here are some websites that are utilizing this effect: https://maxilla.jp/ https://www.alexthery.com/ -
ScrambleTextPlugin - How to return initial html structure through Scrumble plugin?
dmytro.kuz posted a topic in GSAP
Hey guys! First of all, I would like to thank you for such a great product. Is it possible to achieve such a case that the text is returned with the initial styles and structure specified in html and css when un-scramble? For example, I have a complex initial structure in an HTML element (with many divs, span, etc.) and different CSS styles: Can I use the scramble plugin to return to this structure from the encrypted structure? Or you can advise me how to achieve the desired result I want to achieve : =====> What I achieved in fact: ======>
-
Hi all! I've made a carousel where you can scroll through a series slides, each with its own image + captions. For each slide, I set up two captions (one on top and another at the bottom) and set them in a fixed position so that the captions remain in place as you scroll through the carousel. However, even though the captions stay in place, all the text is overlapped on top of each other, and I can't figure out how I can get the fixed captions to update when changing slides. I'd be eternally grateful if someone out there can help me out! I've included a link to a codepen I've been racking with for a while now. Thanks all!
-
Hi All, I am new to GSAP. How do we create a text / heading animation like https://tobiasahlin.com/moving-letters/#2
-
Hello All, I need help on Gsap, if you see the link of codepen theres a hover on text, I want something like on this Site on the last section https://dimitriossykovaris.netlify.app/about Hover on the mail u will see the hover Thanks,
-
I am working on this usecase when text needs to scroll across the screen ad-hoc. I am using gsap throughout the project without issue but the animation of the text is kinda choppy. Not sure if there's a better implementation than what I'm doing here.
-
Hello Everyone. I hope you are doing well. I have a problem with the container text. All I want static text with switchable text, and I already implemented this static text with switchable text vertically, but the container width does not fit to text and does not work for every size(black container). Could anybody help me with that? Thanks. https://codesandbox.io/s/agitated-dewdney-mkwvkj
-
Hi GSAP experts, I'm new to GSAP animation and learning by creating small animations. Currently, I'm working on a small animation in which I want to fill the text fill color using ( -webkit-text-fill-color ). I'm not using any SVG here. Also, I don't know exactly what plugins to use for this. Looking forward to have some answers of my question. Thanks in advance.
-
View the JS panel in the CodePen demo above to see how easy it is to: Split text into words and characters. Pass the chars array into a from() tween for animation. Revert the text back to its pre-split state when you are done animating. Additional features and notes You can specify a new class to be added to each split element and also add an auto-incrementing class like .word1, .word2, .word3 etc. View demo You don't have to manually insert <br>tags, SplitText honors natural line breaks. SplitText doesn't force non-breaking spaces into the divs like many other solutions on the web do. SplitText is not designed to work with SVG <text> nodes. Learn more in our detailed SplitText API documentation. Please visit our SplitText Codepen Collection for more demos of SplitText in action. Where can I get it? SplitText is a membership benefit of Club GreenSock ("Shockingly Green" and "Business Green" levels). Joining Club GreenSock gets you a bunch of other bonus plugins and tools like InertiaPlugin as well, so check out greensock.com/club/ to get details and sign up today. The support of club members has been critical to the success of GreenSock - it's what makes building these tools possible. To learn how to include SplitText into your project, see the GSAP install docs. Demos SplitText Demos -
Hi, I have a SVG text and I'd like to animate it as though someone was writing it. I know it'd be easier with paths elements but I have it as tspans instead. I have tried using drawSVG but it seems that only works with paths. Any help is totally appreciated. The SVG code: <g id="Group_80" data-name="Group 80" transform="translate(-649.918 -257.351)"> <g id="Brand" transform="translate(652.062 329.976)"> <text id="Check_me_out_and_see" data-name="Check me out and see" transform="matrix(0.985, -0.174, 0.174, 0.985, 0, 88.908)" stroke="#000" strokeWidth="1" fontSize="65" fontFamily="Satisfy-Regular, Satisfy" > <tspan x="0" y="61" ref={bstext}> Check me{' '} </tspan> <tspan x="0" y="155"> out and{' '} </tspan> <tspan x="0" y="249"> see </tspan> </text> </g> A screenshot: Thanks
(1).thumb.jpg.5592ce2e25baee2a91d5a404ae25ca7b.jpg)
