X theme interop issue with animated counter
-
The X theme by theme.co has an element you can add using the WPBakery Visual Composer called a counter. Basically, it escalates a number from x to y. You can see it http://www.hiatustraining.com/ about half-way down the page. When I enable your plugin, the #s saty at 0 and the JS console reads
invalid numberStep tween value: function (e,n){var i=Math.floor(e),a=t(n.elem);a.text(i)} invalid number tween value: 420If I disable your plugin, it works as it should. I’m looking into it but the more eyes the better.
-
OK I figured it out. You include some library in a directory called gsap. It must be newer or older than the one the x theme is using. If I eliminate the TweenMax.min.js file from the gsap directory, both the counter and your plugin continue to work. So my suggestion is that however you’re enqueuing this script, that you check first if it is already being enqueued. I’ll try to figure out how you’re doing it and post the code mod if I find something that works.
@jrevillini – You may want to check your theme and how then enqueue it. We enqueue it the way WP recommends and have been trying to convince other developers who use Greensock Animation Platform to do the same.
We keep it updated to the latest version as often as possible.
I have actually reached out to several other developers, both theme and plugin alike and tried to convince them to change their procedures to be more compatible but most have scoffed ( Rev Slider, Layer Slider to name a few ) and basically stated they don’t intend to change it.
You can read an article I wrote on the topic here
Generally the problem is that they include the GSAP files inside a larger file. In simpler terms they merge it with other JS plugins into one file making detecting and preventing conflicts like this impossible on our end.
I would be glad to discuss this further, but like I said the real cause is generally the bundling of GSAP into a custom file and enqueuing it as one bundle rather than enqueuing GSAP as one file.
PS WP recommends against bundling as well in much subtler text than I have written in that article. Generally themes do this to reduce load times and file request. The problem is that that makes compatiblity with other plugins using the same libraries impossible to maintain. As well as causing 2 copies of the library in question to be loaded.
In simpler terms, they try to save load, and end up causing additional load since now there are 2 copies loaded.
Really bundling the libraries should be left to plugins such as W3 Total Cache which will minify and combine JS as long as it is enqueued properly.
It is not the theme/plugins devs job to do this as much as it is for them to try and maximize compatibility.
The only solution I can think of is to offer an option to disable usage of our GSAP library but this could lead to breakage of animations in general if they use an older version.
Hope this helps.
OK, so I got it, but I’m not sure it’s something you can counter the way I did because theme.co enqueued the same script, different version, under another name. They used “tweenmax.” I’m not really sure what you’re supposed to do about it. I went ahead and added this to your code:
if ( ! wp_script_is( 'tweenmax', 'registered' ) ) wp_register_script( 'TweenMax', $js_dir . '/gsap/TweenMax.min.js', false, '1.14.2', true);That’s in the file scripts.php.
I’m just passing along the information. Maybe you know of a better way to handle to prevent code collisions.
Just read your thoughtful comments and I’m highly impressed. I follow what you’re saying. Not sure if the X theme devs bundled it since I can use the above code to avoid enqueuing it a second time (though I STILL can’t find the damn thing in the theme directories).
What crap.
I agree with you completely. WordPress is modular platform. As such, theme authors – especially so-called PREMIUM theme authors – can’t be bundling JS just so novice website developers don’t have to go that extra step for on-the-fly minification and combination of scripts, which they’ll ultimately need to do anyway if they want the plugin JS to be brought in and combined.
Still, this seems to be an issue where there needs to be standardization of enqueuing, no?
Ugh … creating decent sites is Mad Max in reality – a delicate balance of chaos that kinda works.
@jrevillini – I will convert ours to use all lowercase as it is currently TweenMax.
I have made efforts and will continue to in terms of maximizing compatibility but like you said, without convincing every other theme/plugin dev who uses GSAP to conform to one standard( which I have outlined ) we end up having to craft solutions like this for every situation.
I have actually removed our dependency on jQuery cookie recently and will be removing other dependencies as best as possible. But GSAP is where the beauty and extensibility in our animations come from so that one is here to stay.
Also you may want to pass on to the developer of your theme and see if they even require the full tweenmax library. I have come to the conclusion that we only really need TweenLite at this point which is almost 66% smaller.
This is one of those rare cases where there are 2 libraries that contain the same code, one simple, the other extended. Which makes addressing the issue even more complicated.
I am aware of the issues and am working toward resolution for them all, but it will take assistance from other WP devs in making theirs just as compatible.
I have outlined a function that will detect and remove tweenlite if tweenmax is needed, but it would need to be included in all plugins that use GSAP for it to work effectively.
Marking this resolved since you were able to get it working.
I will add an option in the settings to disable loading of the library which you can use since you will need to make your changes above after every update otherwise.
Please take a moment to rate and review the plugin and or support.
@jrevillini you hit the nail right on the head. Rev Slider a well known and reputable premium plugin on codecanyon has basically refused to modify anything. That to me is worse than a novice. At least a novice can claim ignorance.
I even offered to assist in making the necessary changes myself and was ignored. And I have no less than 30 users in the last 60 days that have had compatibility issues because they use both Popup Maker & Rev Slider. That said his most recent versions do fix the bug in JS but still cause multiple copies to be loaded.
I will as I said add a new option, which you will want to enable that will disable loading of GSAP during our load process. This will at least solve your and a few other users issues.
PS if your a webdev I have tons of extension ideas that need developers. You can sell them privately via your own site or through our marketplace for a commission. Just a thought.
Thanks!
I think it’s a lot for us to ask of you to make an option to not include tweenmax in your plugin … I mean where does it end? By that rationale, you’d have to have a switch for all your libraries, and I imagine the support impact of all those new options might be a lot. But it’s up to you. I certainly appreciate your attentiveness. This plugin is freaking awesome.
I think in general the WP developer base needs to push for either some kind of encapsulation/scoping so that multiple versions of the same library COULD be enqueued. It’s not efficient but it would reduce conflicts while continuing the spirit of the modularity of WordPress.
Another option would be for us to push for standardization of enqueuing (e.g. everyone enqueuing GSAP uses “tweenmax” lowercase), but like you pointed out, there are so many ways that these things can be integrated and the success of the standardization process would be in implementation, which no one can count on.
Definitely interested in working with you on some projects. I’ll PM you my contact details.
Thanks again.
The only library that will be left once I am done will be GSAP, and we already have added an option to not load google fonts ( in case your theme is already loading them, don’t want duplicates ). So it wouldn’t be terrible and wouldn’t take to long to add. I am all about maximizing compatibility from within since I generally have no control over other plugins etc.
As i said I have written both standards list for GSAP usage and some functionality to defuse conflicts during script loading, but this wouldn’t work for plugins like rev slider that load GSAP inside their ‘rev.tools.js’ file.
I emailed you just now with more info on the current project and how you can get involved. Look forward to hearing back from you.
Please take a moment if you haven’t already to rate and review the plugin and or support
Just an update … I’m not totally convinced that they use TweenMax or TweenLite in the theme. I thought I had both the animated number counter and your popup working last night when I added the conditional to the registration of tweenmax, but I got a false positive somehow.
I can’t really figure out how, but somehow your TweenMax library file is taking over and trying to do the animation of the digits in my counters on the site, but I’ve looked through their minified code and still am not seeing any references to TweenMax or TweenLite, or even an extension to jQuery where the function has the same name but is now pointing to the other library.
I added some code to load a JS file prior to loading your copy of TweenMax; it lets me know if window.TweenMax or window.TweenLite exist just before loading yours. Neither exist. I also did some fancy mods to your plugin based on http://greensock.com/forums/topic/7074-jquery-wrapper-animate-stop/#entry26398, so now your plugin is loading TweenMax/Lite/etc into a different object and then creating local instances within the class. Still didn’t work.
I gotta see if I can get uncompressed versions of the JS for the theme and dig deeper.
I will still rate the plugin well and will be in touch as soon as I can about development. Gotta put this project to bed first.
@jrevillini If you look at the GSAP functions they may not be using it for animations. One great thing about GSAP is the ability to tween ( or incrementally step ) anything. This means you can set a span text to 0 and use GSAP to tween it from 0 to 100 over say 10 seconds.
Once started it will increase by 1 every .1 seconds until it hits 100 10 seconds later. Sounds like thats what they are using for your counter.
http://www.snorkl.tv/2010/09/how-to-tween-a-variable-with-flash-and-tweenlite/ is an example of this.
Yup, that’s just what it used to do what I’ve redone.
Even in the obfuscated, combined JS file I was able to pick out that they use jQuery waypoint to trigger an event when the counter scrolls into the viedport and regardless of what else they might use, I do know that somehow the TweenMax library starts throwing console messages as described initially, so I know it’s taking over the animation but the parameters passed don’t work.
I tried my best to make the scripts coexist with scoping and shit but since that didn’t appear to be working, and I’m not actually getting any errors thrown, I decided to take the path of least resistance and I wrote a script which makes use of TweenLite if it’s available to do the tweening.
Everything now works in harmony. The one good thing that the X theme devs did was to make use of data attributes on the counter element, so it was easy enough to parse this out and feed it into my own script for processing.
I’ll probably create a plugin which makes the X theme compatible with Popup Maker, or if you like I’ll contribute the code to your project and you can do a:
if ( using x theme ) enqueue the counter compatibility code;Just a thought. I understand there are too many themes out there to account for, but I think the X theme is a pretty popular one for professional WP developers. If you pass, I’ll make the plugin.
http://www.hiatustraining.com/wp-content/plugins/hiatustraining-com/counter.js?ver=0.1
working: http://www.hiatustraining.com
* popup in 5 sec
* scroll down to WHAT’S IN THE COURSE to see the counters working againFunny enough I have never heard of X Theme 😉
That said it may be jquery-gsap that is causing the interference and I will be removing our dependency on that very shortly. jquery-gsap basically replaces the .animate jquery function with a GSAP animation for smoother animations in general without having to know GSAP. But we don’t really use it in our plugin so there is no since in loading it.
PS Fantastic site and concept. My fiance is launching a similar site based around survival training, self defense and homesteading. We are active in those areas of life 🙂
Ha! My fiancee and I have been watching Preppers lately. Get yourself featured on <i>that</i> show and I’ll bet you sell a million subscriptions to your site! 🙂
- The topic ‘X theme interop issue with animated counter’ is closed to new replies.
