Search the Community

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-dragging css class that sets overflow:hidden / auto , but that does not have the required effect.

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

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.

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?

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;

Hi! First time trying out the MorphSVG plugin and it's pretty cool! I'm trying to transition from one SVG text transform to another (and not the shape itself). I know that gsap does not support morphing SVG text, but is there a way to transition from one transform to another? The text in my Codepen should slightly move.

I have a DoubleClick banner I'm building that has dynamic text fields that contain line break elements within the string. So the raw string might be something like: var textOne = "This would<br/>be loaded<br/>dynamically from DoubleClick"; So when I try to use the Text Plugin as it loads the text into the element in the DOM you will briefly see a "<" character pop up before the rest of the element is inserted into the DOM and parsed as an HTML element. This doesn't happen when I use the delimiter: " " option to do whole words but the animation doesn't really achieve the effect I'm looking for as we really do want letter by letter insertion. Is there a way to escape an element or otherwise have the Text Plugin ignore these elements? Additionally, I'm removing the text simply by setting the text to an empty string "" after my delay, with padSpace: true. This produces text that is overwritten from the start of the string when I'd really rather it look like the text is being deleted out. Is there a way to do this that I'm missing?

Hi, Wondered if anyone can help? I have text and i would like it to scroll from bottom to top, going off the banner view and then leaving it on the last text for like 2.5 seconds. How would I do this?? <div class="banner"> <div id="copyScroll"> <p> Lorem Ipsum is simply dummy text? </p> <p> Lorem Ipsum is? </p> <p> Lorem Ipsum is simply dummy text of ? </p> <p> Lorem Ipsum is simply dummy ? </p> <p> Lorem Ipsum is simply dummy text of the printing? </p> </div> </div> <script> var tl = new TimelineLite(); function anim() { copyScroll = document.querySelector('.copyScroll'); p = document.querySelector('p'); tl .to(copyScroll, 1.5, {y: '-400px'}); } </script>

I bet there's a good explanation for this and probably a much better way to accomplish a background crossfade but I'm seeing some strange behavior. In the codepen, I have an SVG with 2 foreignObjects each containing a div with a background image as a base64 image URL. Overlaying that is a group element with a text>tspan with some text in it. I've got a simple autoAlpha tween on the top-most background div from 1 to 0 over 3 seconds and at the same time, the lower-most BG goes from 0 to 1. The crossfade is a little wonky but what's weird is the text is affected by the fade in Chrome. Firefox seems to handle it fine but I need it to work in Chrome. I can set either of the backgrounds to zero opacity and the text looks fine. I'm wondering if it has something to do with positioning because if I add any kind of position setting to the div's with the backgrounds I lose the text behind the background divs. Any idea why this might be happening?

Hi I would like to create an animation where the text slide ups vertically to be replaced with some coming in from below. I would like this to happen on a loop. Here is a codepen for where i've got to so far, before getting stuck http://codepen.io/emilychews/pen/qRENKR The problems I have are: i) The last tween on the timeline seems to be setting the first text div lower in its container prior to the animation starting (you may need to refresh the page to see this properly). When the animation starts this does correct itself, but I need to find out how to prevent this. ii) I can't work out how to loop the animation properly. I currently have it repeating with the {repeat-1} property set on the main timeline, but this isn't a true constant loop. I can't work out how to have it so the text on screen always moves up when leaving and always comes in from the bottom when arriving (this is proving particularly problematic at the end of the animation). Any help would be really appreciated. Many thanks, Emily.

Here is an animated "wordcloud-ish meets bubblechart-esque" data viz exercise attempting to replace heavy packing algorithms, d3.js, etc. with some short, simple, sweet GSAP and exploit CSS3 flex-box's flex-wrap. The idea is to allow a fixed collection of words to grow/shrink (coming from a stream of PubNub "votes") in place without overlapping. Essentially nudging/hugging their neighbors but maintaining the overall position. For my needs it's working beautifully, until a "line-break" occurs. Curious to know if any of you might have ideas for smoothing out the "jump" when a word needs to hop onto the next line? Or perhaps I'm missing something easy by incorporating GSAP's split text.

I just upgraded my membership to get access to SplitText. However, I cannot get it maintain the spaces between words. I am using basic configuration: var splith1 = new SplitText(h1, { type: "chars" }), tl = new TimelineMax(), splith1Array = base.randomize(splith1.chars); tl.staggerFrom(splith1Array, 0.5, { autoAlpha: 0, y: "100%" }, 0.1); It can also be seen on default GS demos: http://codepen.io/GreenSock/pen/pbWwLZ

Hi I am trying to change a text value in an animation using a timeline, for example, i'd like the text to animate off, the value to update, and then animate on again. I need to know that the animate on doesn't start until the text value has changed. I hoped to be able to use the timline.set(textfield, {text:"NewValue"}); but it seems that set/tween can only use numeric values? How can I best achieve this result?

Hello, I just figured out that I can save an illustrator file with live text as an svg image with an embedded font! It seems to work in all browsers that support svg. This seems a great way to have the text pixel perfect without having to use a static image (png24). My next thought was to use SplitText, since svg is a dom element with tags and so on. But it's not supported. ;..( I know "it's a different beast", but at the end of the day it's also just text. Sentences, words, individual letters... Are there plan to supports svg text with SplitText? If not, how would I animate svg text and individual letters otherwise?

When using Chrome the text is blurred during the animation and then at the end the text snaps clear and normal. Does not do that with Firefox or Edge. How do I get rid of the blur when viewing with Chrome. Thank you, Kv2

Hi to all in this forum, Sorry for writing so much text, but being a newbee with GSAP, I decided to describe all my steps in order other users could find at which step I was wrong. Thanks. I. Prehistory: Recently I happily grabbed some nice code from Crysto's website and Petr's blog for my text animation purposes (wow, wrapping each element into <span> with jQuery and passing it to TweenMax is just magic !!!) After diving into code dependencies, I understood (hopefully) that <div> with animated text should have css markup (id) like #gsap-anim-text-1 with position:relative and #gsap-anim-text-1 <span> with position:relative and display:inline-block, for this jQuery script to work properly: var $demoText = $("#gsap-anim-text-1"); $demoText.html( $demoText.html().replace(/./g, "<span>$&</span>").replace(/\s/g, " ")); And for TweenMax to be able to process jQuery's job with staggerFromTo method (everything like Crysto's manual says). II. WordPress integration It worked for me at Codepen test environment, also it worked at the next step - when I tried to integrate TweenMax text animation into WordPress theme: in header.php, when DOM is loaded, TweenMax.min.js (v1.18.2) and executing JQuery script placed and sequentialy initiated after wp_head() right before </header>. note: I updated WP 4.3.3 jquery core to v1.12.2, in order not to load jquery twice, neither through functions.php nor header.php, that's why I placed TweenMax.min.js and and executing jQuery script right after wp_head(), and yes jQuery v1.12.2 for older browser support. It worked when primary text and it's markup were created using standard WP post editor. It even worked when I added #gsap-anim-text-1, #gsap-anim-text-1 <span> and button properties to existing theme css (including # at the begining of a row in css, where required) and cept it the same in jQuery variables: var $demoText = $("#gsap-anim-text-1"); But, it all worked only as long as primary text and it's markup were manualy typed into text fields and saved (e.g. were static) III. Issues: To save time, and avoid typing css properties each time I write a post or create a wordpress page (but still get required output animation at pageload, and when in viewport or hovered)... I decided to add new variables into jQuery script, and css attributes (id's) of #post-title-text to post title, #gsap-anim-text-1 to post content and #gsap-anim-text-2 to post excerpt, with corresponding <span> attributes and different TweenMax effects. 3.1 On the one way, I decided manualy add attributes to certain page elements (php function generated text) by editing theme stylesheet, and adding coresponding variable #id's after existing classes in index.php, page.php, footer.php and content.php (the same way as I used to manipulate classes when using animate.css and hover.css). In that case, I got unexpected results: some page element animations just didn't work, others did, but with <span>'s being visible during TweenMax text animation. I tried to fix that by creating overspecified id's in stylesheet, like h1#gsap-anim-text-1 and h1#gsap-anim-text-1 <span> with required position and display attributes, but it didn't help... animation just stoped working. 3.2 On the other hand, I've been wondering if there is a way to omit theme stylesheet and get the job done jQuery way ? [because some WP themes do not add css markup to php_function_text generated by entire WP core, thus I can't manipulate it with theme stylesheet] Lets say: detect and predefine php function which generates text (or predefine a list of php functions we want to animate with a variable) e.g. : var $demoText = $(" <?php printf( __( 'Published by <a href="%2$s">%1$s</a> on <time>%3$s</time>', 'theme' ), get_the_author(), get_author_posts_url(get_the_author_meta( 'ID' )), get_the_time( get_option( 'date_format' ) ) ); ?>) "); wrap it into additional <div> with jQuery generated class and id (with attributes required for TweenMax animation to work), and then pull it to jQuery script from Crysto's manual for final TweenMax text animation to work with no <span>'s being visible, and with no calls to theme stylesheet. Well, on the way to this, I've found some code : var e = $('<div style="display:inline-block; position:relative"></div>'); $('#gsap-anim-text-1').append(e); e.attr('id', 'myid'); and some additional code: $(document).ready(function(){ $("div").each( function(i){ $(this).attr({ id: $(this).attr("id") + " num_" + ++i }); }) }); but... I have no idea how to put this all to work. P.S. - here is my WordPress playground with issue being visible: class="post-meta" somewhy animated with markup being visible (unwanted issue).

I am not sure if here is the best place to ask such question. But I have very little clue where to start with this and would appreciate if someone could point me to the right place. And not sure what's the best search term for this. I am trying to re-create such typography effect. If you look at "Organic", it changes fill color and spacing as the user scroll down the page. The fill color is filling half way in the text.https://dribbble.com/shots/2623261-Landing-Page-Animation Can GSAP alone achieve this? Or do I need to combine it with CSS? or SVG? What is the best technology for this and where should I be investigating? - - - *Updated: I have found the article for it. It is done with CSS. I wonder GSAP can do the same too? https://css-tricks.com/reverse-text-color-mix-blend-mode/

Hi, Guys, My CodePen's here: http://codepen.io/WW/pen/NNxEXm While the mouse moving on body, there's a little blurry happening with text. is there any possible to remove the blurry? Thanks for ur kindly help.

Hello there, after wasted hours of google searching, i will try to find help here: I just started with GSAP and i absolutely love it. But there are two problems which only appear on firefox: I'll post this link as well, because i dont think it's clearly visible in codepen: http://markmaurer.de/tween/ Problem 1: The animation is REALLY laggy and unsmooth in FF. It looks weird... Problem 2 (not visible on codepen): Text rendering, aliasing, smoothing or whatever changes after the animation is finished. Looks also weird? Everything works smooth on this page: http://www.riiotlabs.com/... So it should be possible to do smooth animations on FF. I've tried almost everything i could find in google but nothing worked. What am i doing wrong? Thank's a lot in advance for any help! Kind regards Mark

Hello, We have been using the Greensock library in an Adobe AIR application for a while now with really no problems. We decided to try our Windows based application on an Android device and found that most things work quite well. The only problem we are seeing with the Greensock library turns up when we use scale effects. By this, I mean any time I attempt to scale a SplitTextField from say 4 to 1, the system lags. If I scale multiple SplitTextFields at once and by letter, then system can almost crash. The board we are using is running one of the latest version of Android and is capable of outputting HD content. Below is the code for one of the animations being affected. Each letter should scale down and rotate in, staggered. // target is the object we are going to animate // time is the total amount of time for the animation public static function MyEffect(target:SplitTextField, time:Number):TimelineMax{ // Activate plugins TweenPlugin.activate([TransformAroundCenterPlugin, AutoAlphaPlugin]); // Create new TimelineMax Object var t:TimelineMax = new TimelineMax(); // Determine how long each letter should animate var timePerHold:Number = time / target.textFields.length; // Go through each textField in the SplitTextField and complete the following animation for(var x:int = 0; x < target.textFields.length; x++){ // Use 20% of the time to rotate the text and scale the text half way t.fromTo(target.textFields[x], timePerHold * .2, {transformAroundCenter:{scale:4, rotation:-180}, alpha:0}, {transformAroundCenter:{scale:2, rotation:0}, alpha:1}); // Use 80% of the time to finish scaling the text t.to(target.textFields[x],timePerHold * .8, {transformAroundCenter:{scale:1}, ease:Elastic.easeOut}); } return t; } I was going to do my best to optimize the system but I wanted to go about it the right way and not just start guessing how to fix this. Any thoughts or direction would be greatly appreciated. Thank you!

I'm trying to come up with a lightweight "news ticker" type of animation. Just maybe 2 different lines of text, one replacing the other in a loop. No problem with the looping or the use of the TextPlugIn. But the docs allude to how one can create custom delimeters to change the way the animation works with the text. I've played around with the jQuery news tickers out there, but thus far, none of them seem to work reliably in the context of a client's e-commerce site, which apparently was constructed by someone who had no real concept of good HTML5 coding practice. I have a different TweenMax animation running on that site now, so it wouldn't be an issue to just write a different TweenMax animation - it just works. How do custom delimeters for theTextPlugIn work? TIA!

I'm basically a noob, but this should be easy and I'm suffering from two days of head-bashing. I'm trying to loop through an array of text values in absolutely positioned elements. The start and return tween positions are based on the width of the elements, which of course change when the text within them changes. I'm using TimelineMax and addCallback to change the text. But I can't figure out how to get the updated element width back into the tween. See attached Codepen -- the element to the right of the red text should bounce back to the right edge of the new text, not the old text. I'm sure I'm missing something basic... http://codepen.io/vanadu/pen/dYmKBb BTW the red text has to have a fixed position, so floats and relative positioning is out...unless I missed something there too. Thanks for any pointers...Vanadu

Hi! I have a static svg that I add some content to from JS and then I move it a bit in a tween. I have mainly svg texts and svg rect-s with a gradient filled each with. The main idea is to slide the rect and then the texts to their final position. Well this works just fine with Firefox, but Google Chrome fails to move the texts. Although I am able to move texts with jQuery like $('.foo').attr('y', $('.foo').attr('y') + 100); but not with tweenmax. Any thoughts? Regards, Robert

Hi all I'm a new member I need to animate text with Gsap. I know of SplitText plugin, but unfortunately I am not a premium member. I found blast.js that it's perfect for my needs: http://julian.com/research/blast/ Is it possible to use it with Gsap? If yes, can You provide me an example, please? Thanks in advance

Hello, I can get scrambleText to work perfectly in my AS2 project. But does it support htmlText at all? I've looked through the documentations and whatnot, and can't find anything stating one way or the other, so I'm guessing no? If not, would it be possible to modify the plugin in order to get it to work somehow? I seem to remember Tweener having this functionality, but it's been so long I can't be certain anymore. Any help please? Thanks!