Search the Community

Showing results for tags 'text'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • HTML5 / JS
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager

Categories

There are no results to display.


Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests

Found 47 results

  1. PaoloDoma

    Text Animation Mask

    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
  2. nathanlord

    Multiple SVG Text colors with TextPlugin

    Is there a way to use the GSAP TextPlugin to animate SVG Text so that different words within one text element have different colors?
  3. 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?
  4. flash08

    Text animation questions

    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 code was forked off of another similar pen, I think, but a long time ago. The basic issue here is that the available plugs for basic WP animation are beasts: tons and tons of code, enough to slow page loading times by many seconds. TweenLIte, of course, is extremely lightweight. I'd be grateful if someone could explain the movement pieces of this TweenLite animation, so that I could figure out where the "offscreen" slides need to "go" to remain invisible.
  5. 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
  6. craftedbygc

    Draggable text elements with overflow

    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.
  7. 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
  8. 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.
  9. timdt

    Text reveal animation

    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?
  10. Em Karimifar

    Text tag glitches

    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;
  11. laurentvd

    Animating SVG text transforms

    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.
  12. 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?
  13. lynette

    scroll text up

    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>
  14. 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?
  15. emilychews

    Creating A Loop Of Animated Text

    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.
  16. andyhullinger

    Smoothing out flexbox?

    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.
  17. anteksiler

    SplitText removes spaces

    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
  18. 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?
  19. Chris

    How do I animate svg text?

    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?
  20. 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
  21. 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).
  22. 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/
  23. 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.
  24. markmaurer

    Animation not smooth in Firefox

    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
  25. 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!