Jump to content


  • Posts

  • Joined

  • Last visited

Everything posted by nemmoj

  1. Hi everyone, Thanks for your time and effort being spent here. Today I`ve solved this isse. The bone was burried in type of jQuery function, .replace() method and RegEx. Initially, in my playground I had this: var $demoText = $("#gsap-anim-text-1"); $demoText.html( $demoText.html().replace(/./g, "<span>$&</span>").replace(/\s/g, " ")); So my class="article-meta" (...WP core generated php text classified by my blog theme stylesheet, and predefined in content.php) was followed by manually added variable #id ( id="gsap-anim-text-1" ). Thus my post excerpt (class="article-meta") was animated by TweenMax in an odd way with this function (with markup characters being visible, and belive me... that was not .css issue ) . As a solution, I've changed jQuery function to : $demoText.each(function(){ $(this).html($(this).text().replace(/./g, "<span>$&</span>").replace(/\s/g, " ")); }); I think it lets RegEx /./g expression cooperate with jQuery's .replace() in a better way. p.s. - jQuery v.1.12.2 was used in my WP 4.3.3 playground. p.p.s. - I've left the issue in my playground untouched, for everyone to see the issue (markup being visible during animation) and try this code as a solution. Worked for me. Thanks.
  2. Hi Jonathan, Never heard about wpautop() , I'll definitely give it a try when required to get rid of <p>'s, but dev console in my browser says that there is no extra <p>'s or <br>'s wrapping my class="article-meta". All in all, I was ok when used WYSIWYG editor (as stated in my Post #1 "It worked when primary text and it's markup were created using standard WP post editor"), and had no problem. Issues came into the light when I manually appended jQuery variable id="gsap-anim-text-1" and id="post-title-text" right after class="article-meta" and class="title" respectively into current theme content.php file (these text fields are generated by WordPress core and classified with markup by current blog theme). So now class="title" is animated correctly (with no markup being visible), but class="article-meta" is aniated with markup being visible (the issue). Thanks for intresting wpautop() method.
  3. Hi Carl, Well, saying "...thanks for fast reply" in my Post #7 , I stated that I'm happy that my post has been given attention. Though the only advice I get by that time, was Chrysto's advice to obtain paid SplitText plugin, assuming that I'm planing "...to use production code". At this point I wrote that "...all these tricks i tried just for fun" and provided a link to my playground to show the issue... And the main issue is that jQuery script (which wraps each text char into <span>) and TweenMax cooperate in an odd way in WordPress environment... they do animate, but with markup being visible at some text fields generated with php_get and php_print. As you can see (in my playground), when you press the "start animation" button, the post title (bold) is animated without markup being visible, but post excerpt is animated with markup being visible. That is the main issue. And I still hope for help in finding a solution to this problem, because I still haven't got any advices which could fix (or partly solve) my issue. Thanks.
  4. Hmm... sounds like I won't get any help for free in here, pity thing.
  5. Hi Chris and other senior forum members, thanks for fast reply. Well, all these tricks I tried just for fun at my playground to check if it works at all. And I will be happy to see my toy playing well, with your help of cource
  6. Hey, nice to see that my post brought some fun
  7. 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).