Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Search the Community

Showing results for tags 'text'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge


There are no results to display.

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Personal Website



Company Website



  1. Hi everyone, I’m discovering GreenSock animation framework, seems pretty powerful. But I’m struggling reproducing the following text animation (that maybe some of you will find basic?) : https://www.buildinamsterdam.com (by animation, I'm speaking about the very first text animation on black screen where text appears from the bottom by words, then disappears on the left by chars, then black background disappears by collapsing into 3 vertical bands) Before asking for your help, I've done my research on the forum and I discovered the need to use SplitText add-on. I've set
  2. 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.
  3. How to achieve the effect of text appearing at the top of the container? The text comes out more and more as you scroll, it is fixed but only visible in the given container.
  4. I am trying to replace a jQuery plugin called "li-scroller" which combines the <li> tags from an unstructured list and scrolls the items inside a div one after another from left to right indefinately. Unfortunately the plugin distorts the letters slightly as the speed increases and I was hoping that Greensock would produce a more fluid result. Since I am new to Greensock, I am not sure which approach to take to accomplish this. Is Split Text necessary or would a method using Split Text produce smoother results than the alternative? Any guidance or examples to help get me started i
  5. SplitText is an easy to use JavaScript utility that allows you to split HTML text into characters, words and lines. Its easy to use, extremely flexible and works all the way back to IE9 (IE8 for GSAP 2's version). Although SplitText is naturally a good fit for creating HTML5 text animation effects with GreenSock's animation tools, it has no dependencies on GSAP, jQuery or any other libraries. Note that the video below uses GSAP 2's format. .videoNav { color:#555; margin-top: 12px; } 0:00 Intro 0:21 SplitText solves problems 2:01 Basic Split 3:34 Config
  6. I’m trying to reproduce an effect i saw on this website : https://stuart.com/delivery-express-courier/ Just after the section with this title : Eco-friendly courier service, go green with us You can see the result on the temp website: https://swoopin.webflow.io/ There is 3 sections, and on the scroll, the image on the left stay fixed then fade to each other, while the text on the right continue to scroll normally I started workin on it, i got essential but it's buggy How could i fix that ? <script> gsap.to('#IMAGE-ELEMENT', {
  7. Hi, This is my first time posting in the forum! I searched everywhere but could not find the answer so here goes. I want to animate a line of text on a motion path. At the moment it is not working as the characters all end up on top of each other. I think it has to do with the start/end within the path that's being set but I do not know how to add code to address this. (FYI my end goal is to animate the three lines of text on three different motion paths perhaps using the class for each line. Any help would be appreciated.)
  8. Scrambles the text in a DOM element with randomized characters (uppercase by default, but you can define lowercase or a set of custom characters), refreshing new randomized characters at regular intervals while gradually revealing your new text (or the original text) over the course of the tween (left to right). Visually it looks like a computer decoding a string of text. Great for rollovers. See the Pen GSAP Scramble Text Plugin - feature plugin page by GreenSock (@GreenSock) on CodePen. You can simply pass a string of text directly as the scrambleText and it'll use the defaults for
  9. GreenSock


    Tweens the text content of a DOM element, replacing it one character at a time (or one word at a time if you set the delimiter to " " (a space) or you can even use a custom delimiter). So when the tween is finished, the DOM element's text has been completely replaced. This also means that if you rewind/restart the tween, the text will be reverted. Here is a simple example of replacing the text in yourElement: //replaces yourElement's text with "This is the new text" over the course of 2 seconds gsap.to(yourElement, {duration: 2, text: "This is the new text", ease: "none"}); If you'd lik
  10. Hi, I'm wondering how I can create a text mask animation. Actually, I don't know if it's possible to create something like this without SVG. Here's a preview of what I'd like to make : https://ibb.co/C50cJ4b I would like to animate the mask (that is black in the picture). I saw this post in the forum, but actually I'm a beginner and I don't know how to create what I want. Thanks a lot ! Laurie
  11. Hey guys, I need a little help with splitText weird behaviour. Every single time i visit the staging site, splitText split lines wrongly. I have to refresh and then everything looks, ok. Same thing when i resize the browser the text is not wrapping automatically like it should. Do you have any ideas of what might be wrong? I use intersectionObserver to detect the item in viewport and then triggering the TweenMax function. Thank you very much
  12. Hello, I'm trying to update this @Shaun Gorneau Codepen. First of all I would appreciate some help moving the code from jQuery to plain JavaScript. I'm stucked On the other hand I'm experimenting with this pen trying working with a font-size relative to the window width (example: font-size: 8vw;). Obviously, on window resize it messes up all the programming because it changes the object width. Anyone has a better idea than refreshing the page on window resize with a classy: window.onresize = function(){ location.reload(); } Thanks in advance,
  13. Working on a project whereby a little creativity is called for. I have attached a zip file that contains the results of running forced alignment on a transcript using gentle that aligns an audio file to its transcript. I am looking for a way to "animate" the text as the speech is spoken in order to maximise the focus on the text being spoken as it is spoken. If someone looks away and comes back to it - they should be straight in. It is kind of like subtitles but for audio - except I want it to be as creative as possible. I originally had in mind - simply fading the text in and out whilst scro
  14. Hello everyone, how can I animate with GSAP a gradient text using the css code below? Or some other way. background: linear-gradient(to right,#3b1c52 50%,#b51a84 80%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  15. Hello All, I am looking for the same text hover effect like below link. https://www.artistsweb.com/?fbclid=IwAR1ZFgHylvcRXuiqxcfiLOykfnX7VyQv4CssztG0TbkdW1RlxEWcZ1bMkXE Please help me out.
  16. Hi, i'm trying to replicate the animations of the texts of this site: https://designcanada.com/ For example, how can i replicate the animation of "Stuart Ash" or "Canada's heritage of graphic design" ? It's seem that there is a mask over all. is there a particular function in GSAP? Now i only use a motion like this TitoloSezione1Tl.from($TitoloSezione1, 0.5, {x:100, delay:1, opacity:0, ease:Power1.easeOut}); Thank you all Paolo
  17. Is there a way to use the GSAP TextPlugin to animate SVG Text so that different words within one text element have different colors?
  18. I'm having an issue with text shifting/resizing in Google Chrome. This seems to happen while the parent div is being animated. If you look at the Codepen example, you'll see the text snap to different sizes, and it also looks like it tries to change weights as well. The other thing I've noticed is that the parent container also shifts with the text. I've read other answers about this, but anything I've tried doesn't work. Does anyone have insight on this issue?
  19. I'm working on a lightweight text slider for use on WordPress sites. The slider's context appears to be an issue: on some sites, contained within a widget, the animation works perfectly. On others, using a different WP theme, when the animation runs, the "slides" do slide, but instead of sliding out of view, they just slide to the far right side of the screen, underneath the other content. The "offscreen" slides remain partially visible under that content. I am pretty sure this is concerned with the distance the "slides" move, which I'll admit I don't fully understand. The basic co
  20. Guys, I don't understand this, using this simple splitText action inside a function, works fine on codepen but locally getting in browser console: TypeError: undefined is not an object (evaluating 'a.length') Any ideas? Set up is code in a local .js file correctly linked and working with other animations and html elements in index.html exactly as codepen example. 2 a.m. here so that might have something to do with it, not normally this dense... Buzz
  21. In the Codepen I am trying to make a draggable list of items that contain text. Each item must have `overflow: auto` so that the content can scroll. However, on touch devices in Chrome the pointer event gets caught in the item and it does not drag smoothly. To replicate, launch in Chrome and enter responsive mode via dev tools. Dragging in between the elements works as expected, but dragging on the elements does not work correctly. I have tried various draggable options and also laying out without flexbox, but none seem to work. I have also tried toggling a dragging/not
  22. Hi all, I try to have a perspective effect on my title "Master Roaster", I separate all the letter (all of them are in a different <span>), but my animation doesn't work on that, it's work on my head-text ("01. Redesign"). I can't find the problem... Anyone could help me ? Thanks a lot
  23. hi is anyone one know how to animate text on a curve path, i've attached a snap shot. can you please advice me to get this thing done.
  24. Hey guys, i was lookin on the forum and on the internet to finds something about a show/reveal text animation. I want to draw a line in html and out of that line the text is revealed. almost like you lift a curtain and the text is revealed. Looks very simulair like this. i tried to wrap a text element inside of a div with an overflow and then with gsap lift the div wich will reveal the text behind it. Didnt get that to work unfortunately since the elements both move when i try it. Any suggestions on how to achieve this?
  25. Hi all, I'm having some issues when I animate text using gsap and scrollmagic. The screenshot shows where I'm in the middle of a tween that has a duration. Any thoughts? Thanks;