Jump to content
Search Community

SplitText PlugIn Console error

dada78 test
Moderator Tag

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 guys,

 

I am using the splitText plugin in a Rich Media expandable unit:

 

I loaded the plugin after TweenMax in this order right before the bottom closing body tag for a rich media Doubleclick creative:

<script src="https://s0.2mdn.net/ads/studio/cached_libs/tweenmax_1.19.0_643d6911392a3398cb1607993edabfa7_min.js"></script>

<script src="SplitText.min.js"></script>

<script src="logic.js"></script>

 

In the head I loaded the enabler necessary for the Doubleclick Rich media API to work as intended as usual...

 

The ad works fine, the split text works as intended, it splits the lines and wraps the lines in classes. 

 

In the collapsed state it will run an animation that has the split text call in the ad's show() function:

 

function show() {

   var mySplitTxt = new SplitText('#txt1C', {type:'lines', linesClass:'line++'});

    var tlCollapsed = new TimelineMax();

    tlCollapsed
     .set(mySplitTxt, {opacity:0.9})
      //more stuff
     .staggerFrom(mySplitTxt.lines, 0.8, {opacity:0, x:'+=100', ease:powerEaseOut}, 0.08, 'start+=0.5')
      //more stuff
}

 

When previewing in the browser, no error appears. Only after I expand the ad I can see:

 

Console Error:

tweenmax_1.19.0_643d6911392a3398cb1607993edabfa7_min.js:15 Uncaught TypeError: a.split is not a function

 

This happens on expand: When the expand button is clicked, the unit expands and runs the tlExpand timeline.
 

expandButton.addEventListener('click', onExpandHandler, false);

var splitTxt1E = new SplitText('#txt1E', {type:'lines', linesClass:'line++'});
var splitLegal = new SplitText('#legal', {type:'lines', linesClass:'line++'});
var tlExpand = new TimelineMax({paused:true, overwrite:'all', onComplete:cardSheen});

tlExpand
.set(['#expanded-panel', '#expanded-exit', 'closeBtn'], {display:'block', visibility:'visible'})
.set(['#collapsed-panel', '#collapsed-exit', 'expand-button'], {display:'none'})
//more stuff
.staggerFrom(splitTxt1E.lines, 0.8, {opacity:0, x:'+=100', ease:powerEaseOut}, 0.08, 'start+=1.3')


  function onExpandHandler(){
    Enabler.requestExpand();
    Enabler.startTimer('Panel Expansion');
  }

function expandStartHandler() {
   TweenMax.set(['#expanded-panel', '#expanded-exit', 'closeBtn'], {display:'block'});
   TweenMax.set(['#collapsed-panel', '#collapsed-exit', 'expand-button'], {display:'none'});
    // add expanding animation here
    tlExpand.restart();
    Enabler.finishExpand();
  }

 

I will try to stripped down codepen but in the meanwhile, any clues as to what could be happening that causes the error when the unit is expanded? Again, the animation works as intended.
 

Thanks!

error.png

Link to comment
Share on other sites

Posting the error from a minified file without a map doesn't reveal much.

 

Split probably has to do with splitting a string. The only thing that sticks out to me is 'expand-button'. Is there an element like this <expand-button></expand-button> in your html?

 

Link to comment
Share on other sites

Hi OSUblake,

please see the console error when using the uncompressed library and plug-in. And yes, I do have an expand-button <div id="expand-button"></div> in the collapsed panel in order for the unit to expand, which it does.

Thanks for taking the time to look into this. I mean the creative works fine, but am curious as to why that error occurs. I also only see it in webkit browsers not in Firefox.
 

error.png

Link to comment
Share on other sites

Thanks. It's a lot easier to figure out where the error is coming from when you don't use minified code.

 

I don't know if this is related to that error, but the reason I was asking about an element named <expand-button></expand-button> is because you're trying to select elements with that name.

// 'expand-button' is not an id
TweenMax.set(['expand-button'], {display:'none'});

// Same thing here for closeBtn
TweenMax.set(['closeBtn'], {display:'block'});

 

See, expand-button is a totally valid HTML5 tag name. 

 

Element IDs start with "#", but it's hard to tell if that's even the issue.

 

The error is coming from the CSSPlugin. It can't parse the position of something, so @GreenSock might need to take a look at this. Can you reproduce this error in a CodePen demo?

 

  • Like 1
Link to comment
Share on other sites

Thanks guys, will be setting up the codepen, but need to know how I would be able to reference both of the unminified TweenMax and splitText plugin using codepen? The quick add Greensock is minified and also isn't splitText supposed to be for members only? Please let me know how to proceed. Thanks!

Link to comment
Share on other sites

It looks like the problem is that you used an invalid backgroundPosition value. According to the CSS spec, it's supposed to be a string, and typically a space-delimited set of 2 values like backgroundPosition:"-230 0" but you just did backgroundPosition:-230. Casting it as a string seems to solve that issue; like just wrap it in quotes and you're good-to-go. Does that help? 

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