Jump to content
GreenSock

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

Can I use SplitText to animate Wordpress's Main Menu buttons?

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

Hello all!  My client wants his Wordpress site main menu buttons text characters to fade in with a stagger so some of the letters fade in before others until everything is 100% opacity.  I think the best way to do this is with SplitText.  I'm really rusty on Greensock and applying the animation in Wordpress is where I'm sure I'll get confused.  If I can get a good game plan going I'll be happy to reup my membership.  Can anyone help?!  

Link to comment
Share on other sites

Howdy, @DeltaFrog. Yeah, if I understand your goal correctly, it should be pretty easy with SplitText. All you've gotta do is load the SplitText file (and GSAP, like maybe the TweenMax.min.js file) and write your animation code in a <script> tag. Does that answer your question? Is there something in particular you needed help with (GSAP-related)? 

  • Like 2
Link to comment
Share on other sites

Hey DeltaFrog,

 

As Jack said, this should be pretty straightforward. I might recommend creating the animation in something like CodePen and then adding it to WordPress so that you don't have to worry about two things at once :smile:

 

Don't forget to check out the SplitText docs to see how to create the animation.

  • Like 3
Link to comment
Share on other sites

Thanks so much for the quick reply guys!  I'll give it a try and let you know if I get lost.  Thank you!  

Link to comment
Share on other sites

I created a code pen, I have the characters fading in but how do I get them to fade in staggered, randomly instead of from the beginning of the word?  

See the Pen pmdVrz by chriscalabrese (@chriscalabrese) on CodePen

Link to comment
Share on other sites

How do you want them to be "randomly" staggered? Staggered means in order :smile: Do you just want all characters to fade in a completely random order? Or word by word but with the characters of each word in a random order?

  • Like 1
Link to comment
Share on other sites

48 minutes ago, ZachSaucier said:

How do you want them to be "randomly" staggered? Staggered means in order :smile: Do you just want all characters to fade in a completely random order? Or word by word but with the characters of each word in a random order?

 

 

This got the exact result I was looking for! Codepen is updated.  :) 

 

 

var tl = new TimelineLite, 
    mySplitText = new SplitText("#quote", {type:"words,chars"}),
    
    
    chars = mySplitText.chars; //an array of all the divs that wrap each character

TweenLite.set("#quote", {perspective:400});

tl.staggerFrom(chars, 0.8, {opacity:0, ease:Back.easeOut}, 0.1, "+=0");

document.getElementById("animate").onclick = function() {
  tl.restart();
}

Link to comment
Share on other sites

I renewed my shockingly Green membership :mrgreen: and downloaded the SplitText.js and other support files.  I need help implementing into my WP build (http://hematogenix.flywheelsites.com).  I just want the main menu buttons to animate in like this pen 

See the Pen pmdVrz by chriscalabrese (@chriscalabrese) on CodePen

 

Questions:

Where should I place "the animation code in a <script> tag" inside Wordpress? Inside the header? I'm using the theme Divi. (see attachment) 

Do I have to upload the SplitText file on my ftp or can it be on a different host?  Am I calling it correctly?  (see attachment) 

Lastly if I want all the navigation to animate in with SplitText, what Div or Divs should I be targeting?  I can get anything to fire here.  :( 

 

305262391_ScreenShot2019-05-24at4_24_42PM.thumb.png.d52355c49ef7e55e93125e856b98e92f.png

 

Link to comment
Share on other sites

Thanks for renewing your membership!

 

I'm not a WordPress expert, so I may not be able to help much, but I can say that you should NOT be putting your animation code in the <head> because the browser executes that before it even knows what's in the DOM (the stuff you're trying to animate wouldn't exist yet). It's fine to load GSAP and SplitText in your <head>, but you wouldn't want to put your animation code there - put that toward the bottom of your <body>. 

 

And yes, you'd put the SplitText.min.js file on your server and pull it in from there - it's not on our CDN (for obvious reasons). 

  • Like 2
Link to comment
Share on other sites

Hi Jack, I appreciate your help, I really need to understand this so I can leverage Greensock on future Wordpress projects.  Here is a screen shot of the code for the main navigation buttons.  Can you tell me what div id I should be targeting to animate the main menu?   

 

I changed the location of the animation code to a spot labeled "Add code to the bottom of your posts, before the comments".  Which I think is toward the bottom of the <body> but I still don't see any magic. I think if i can at least confirm the appropriate id that would be a good start.  

 

Thanks all! 

 

 

Screen Shot 2019-05-25 at 7.46.45 AM.png

Screen Shot 2019-05-25 at 7.47.57 AM.png

Link to comment
Share on other sites

Hey DeltaFrog,

 

It's hard for us to know exactly how to help without seeing the page for ourselves. Do you have a public link?

 

A couple notes based on what we can see: 

  • Don't include the <script> tags in the JavaScript editor (second screenshot in your most recent post)! It assumes that everything in there is JavaScript and it will add the script tags for you. 
  • Using your browser's developer tools console (the second tab in your first screenshot in your most recent post) can really help in aiding you figuring out what the issues are. 
  • Like 1
Link to comment
Share on other sites

I understand - I will create a public link.   Unfortunately when I remove the <script> tags in those windows it turns to regular text and I get a bunch of error icons.  Screen%20Shot%202019-05-25%20at%208.15.3

Link to comment
Share on other sites

 

11 minutes ago, DeltaFrog said:

I understand - I will create a public link.   Unfortunately when I remove the <script> tags in those windows it turns to regular text and I get a bunch of error icons.  

 

Interesting. I assumed incorrectly then. Sorry about that!

Link to comment
Share on other sites

34 minutes ago, DeltaFrog said:

Here is a screen shot of the code for the main navigation buttons.  Can you tell me what div id I should be targeting to animate the main menu? 

 

Like @ZachSaucier said, it's very difficult to troubleshoot blind so if you can provide a public link that'd be best. This seems to be veering into more of a WordPress question rather than a GSAP question, and we really try to keep these forums focused on GSAP as much as possible. We just don't have the expertise or the resources to offer free general consulting for other technologies, but we'll do our best to chime in with suggestions when we can.  

 

Based on the markup, you may need to target each <li> in that menu, like #menu-item-40, etc. Just a guess. 

Link to comment
Share on other sites

4 minutes ago, ZachSaucier said:

Interesting. I assumed incorrectly then. Sorry about that!

 

Not a problem!  I assumed the same thing, WP is a mysterious beast. :blink:  I'll create a live link so we can get on the same page.  Thank you! 

Link to comment
Share on other sites

Since you appear to be using a helper within a theme interface to insert code which I'm not familiar with I can't help with that though you would want to load the scripts in the footer typically, you should probably go to the support thread for the theme itself, and seek advice there.

 

If you wish to learn how to properly add scripts yourself you would generally enqueu() them. Here is recent post discussing that.

 

As far as what to target wordpress creates unordered list formatted menus so you'd be targetting something like: "ul.top-menu li a"

 i.e. find the menu ul "ul.top-menu" and target the interior list"li" and link "a"or use greater specificity if required such as "li.menu-item a"

 

 

 

 

 

 

 

 

 

 

  • Like 3
Link to comment
Share on other sites

I want to thank everyone who responded to this thread.  I was able to load GS and get the animations firing in Divi.   For anyone who cares - the <head> location for pulling in the JS works.   I was missing a ">" and was also calling on the wrong SplitText file in the "bonus-files-for-npm-users folder".   

 

Thanks y'all!! 

 

 

  • Like 3
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.
×