Jump to content
Search Community

WordPress, jQuery and TweenMax text animation workaround

nemmoj test
Moderator Tag

Go to solution Solved by nemmoj,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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.
 
 

Q1: Is there any html/css solution for me at this 3.1 way ?

 
 
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.
 

Q2: Could you please help me find the  jQuery solution, if there is one, in my 3.2 case ? 

 

 

P.S. - here is my WordPress playground with issue being visible: class="post-meta" somewhy animated with markup being visible (unwanted issue).

See the Pen EKwRyO by nemmoj (@nemmoj) on CodePen

Link to comment
Share on other sites

Hi nemmoj, and welcome to our forum! By the time I wrote the post, it was more like proof of a concept and dirty and easy fix, rather than ready to use production code. I would suggest you to try SplitText plugin for splitting the characters/words, and again you can animate them with TweenMax. 

Also, it would be great if you post link to a live demo of the page, so I can take a look of the WP generated markup.

 

Best,

Chris 

  • Like 5
Link to comment
Share on other sites

Hi nemmoj, and welcome to our forum! By the time I wrote the post, it was more like proof of a concept and dirty and easy fix, rather than ready to use production code. I would suggest you to try SplitText plugin for splitting the characters/words, and again you can animate them with TweenMax. 

Also, it would be great if you post link to a live demo of the page, so I can take a look of the WP generated markup.

 

Best,

Chris 

 

 

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 :)

Link to comment
Share on other sites

Hi nemoj,

 

Your previous post thanked us for your help. It's unclear what question still remains and I'm not really sure what we are supposed to do with he link you provided. I clicked on he start animation button and saw an animation.

 

I have to imagine other members had the same experience.

 

For what it's worth all of our support is free and everyone other than Jack and myself volunteers for free. I can assure you though that everyone works very hard to help everyone with GSAP.

 

Perhaps you can take another shot at clarifying what issue you are having with GSAP specifically.

 

If it's more of a Wordpress questions we will do out best but unfortunately that's not an area where all of us are experts.

 

Thanks!

  • Like 2
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

If you are outputting your text via a WordPress php template file then you should be OK. But make sure if your manipulating text nodes in WordPress that are in the WordPress WYSIWYG editor. That WordPress does not wrap your spans in <p> tags. WordPress is notorious for adding extra markup that is placed inside the WYSIWYG editor. If it does you might have to disable the visual editor and make sure you use the wpautop() method to make sure WordPress does not insert <br> tags or wrap <p> tags around your text. I would disable it

 

remove_filter( 'the_content', 'wpautop' );

remove_filter( 'the_excerpt', 'wpautop' );

 

Also right click and view source to make sure the generated HTML markup on first load is correct when outputted by WordPress.

 

Just my two cents!

  • Like 1
Link to comment
Share on other sites

If you are outputting your text via a WordPress php template file then you should be OK. But make sure if your manipulating text nodes in WordPress that are in the WordPress WYSIWYG editor. That WordPress does not wrap your spans in <p> tags. WordPress is notorious for adding extra markup that is placed inside the WYSIWYG editor. If it does you might have to disable the visual editor and make sure you use the wpautop() method to make sure WordPress does not insert <br> tags or wrap <p> tags around your text. I would disable it

 

remove_filter( 'the_content', 'wpautop' );

remove_filter( 'the_excerpt', 'wpautop' );

 

Also right click and view source to make sure the generated HTML markup on first load is correct when outputted by WordPress.

 

Just my two cents!

 

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.

Link to comment
Share on other sites

  • Solution

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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...