Jump to content
GreenSock

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

SplitText PlugIn Console error

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

Share this post


Link to post
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?

 

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Yeah, it'd be SUPER helpful to see an example of something that generates this error. Something is fishy, but I just can't troubleshoot it blind, that's all. 

  • Like 1

Share this post


Link to post
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!

Share this post


Link to post
Share on other sites

Don't worry about the unminified versions for now. That was just to see the call stack in your image.

 

For SplitText, use this url.

https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/SplitText.min.js

All the urls for member plugins to use on CodePen can be found here.

See the Pen OPqpRJ by GreenSock (@GreenSock) on CodePen

 

 

  • Like 1

Share this post


Link to post
Share on other sites

Codepen below: I noticed that the error didn't appear when I removed the cardSheen and cardHolder, but can't reproduce what I exactly did or changed, when the error went away. Anyway, here it's visible in debug mode... Thank you!

See the Pen 398ab3988fb9300987625c552b8f7614 by dada78 (@dada78) on CodePen

 

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Aaaaaah! Yes!! Thanks so much helping me troubleshoot this.

  • Like 1

Share this post


Link to post
Share on other sites

No problem at all. Happy tweening!

Share this post


Link to post
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

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. 


  • Recently Browsing   0 members

    No registered users viewing this page.

×