Jump to content
Search Community

Splittext on multiple items using an each function

ochalmers test
Moderator Tag

Go to solution Solved by Rodrigo,

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

Hey all,

 

Sorry for another topic (I already have one running - please delete or close this one if we're only allowed one at a time). 

 

As you can see on this codepen - 

See the Pen JYoKzY by olichalmers (@olichalmers) on CodePen

- i've got a navigation menu with multiple items that I want to apply a splittext hover timeline to. As the demo shows I have it working with separate variable and hover states for each item in the nav, but to me this looks OTT and a bit messy. My question is are we able to integrate an each function to eliminate having to make individual hover states and variables for each nav item? The codepen linked to this topic has it set up but i'm getting errors when trying to fire it locally.

 

Best,

Oliver

 

See the Pen BoyLax by olichalmers (@olichalmers) on CodePen

Link to comment
Share on other sites

  • Solution

Hi Oliver,

 

There were a few issues in your code.

 

First the selector for the each loop wasn't working, therefore the each loop didn't even begun. In this situations is better to add a common class to the elements you want to loop through and use that as a selector, is far easier.

 

Second, on your code you were referring to the SplitText instance and not the chars array created by SplitText, so even with the loop working you still would get an error or no animation at all.

 

Finally is better to not use <span> for the SplitText since there are some browser issues animating transforms in elements with an displya:inline property, always use inline block elements, so I removed the spans from your markup.

 

This code works

 

HTML

<a class="nav-link" href="" id="live"><div class="sitenavTxt">Live</div></a>

JS

$(".nav-link").each(function(i,e) {
  
  var self = $(this),
	      sitenavtxt = self.find(".sitenavTxt"),
	      sitenavtxtSplit = new SplitText(sitenavtxt, {type:"words,chars"}), 
	      sitenavtxtChars = sitenavtxtSplit.chars,
	      sitenavTL = new TimelineMax({paused:true});
			 
  sitenavTL.staggerFromTo(sitenavtxtChars, 0.1, {color: '#858585'}, {color: '#FFF'}, 0.08);
  
  e.hoverTl = sitenavTL;
  
  self.hover(function(){
    
    sitenavTL.play();
    
  }, function(){
    
    sitenavTL.reverse();
    
  });

});

Happy Tweening!!

  • Like 1
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...