Jump to content


Can't get TweenLite running in Ruby on Rails

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

I used codepen.io to write a quick animation and am now trying to integrate it into my rails application. I've required TweenLite.min.js CSSPlugin.min.js and TimelineLite.min.js and reduced my animation to a simple test but nothing happens and I get no errors. How do I troubleshoot this?


Here's my test: 

$('.btn').on('click', function() {
  var btn = $(this);
  TweenLite.to(btn, 0.1, { color: "transparent" });


I'm using jQuery 1.12.4 (tested working in codepen).

Link to comment
Share on other sites

Hello @creativetags and Welcome to the GreenSock Forum!


Sorry your having an issue..


Do you have a link to your codepen so we can see your code in context with CSS, JS, and HTML ?


Also do the script tags or JS links in codepen for the included TweenLite, CSSPlugin, TimelineLite JS files have the word "/latest/" in them?


And keep in mind that "transparent" is a  keyword and should really be something like "rgba(0,0,0,0)" so its what the browser calculates as "transparent".


Any additional info you can provide will help us help you solve this :)

  • Like 1
Link to comment
Share on other sites

Ok, but it does work in codepen so there's kinda no point testing it there. Here's a slightly different version: 

See the Pen MQPdyN by creativetags (@creativetags) on CodePen


not using scripts with latest in them. Using 1.20.3 of TweenLite


transparent wasn't an issue with codepen and Chrome. Perhaps it is with other browsers?

Link to comment
Share on other sites

Thank you for providing the codepen. I asked for it is so we have context of what your trying to get to work outside of codepen. Since we can not see your files for Ruby on Rails.

  • Do you see any CSS in your Ruby Rails that might be causing a conflict?
  • And i notice your only trying to tween 0.1 of a second. That amount of duration wont be noticeable since its 100th of a second.  Were you trying to just set it to transparent with no transition animation? (if so in GSAP a zero based tween you can use the set() method)

One thing I do notice that the codepen is using different versions of TweenLite, TimelineLite, and CSSPlugin

  • TweenLite - 1.20.3
  • TimelineLite - 1.20.2
  • CSSPlugin - 1.20.4

That might cause an issue when running outside of codepen. They should be the same version number for each of the GSAP scripts (TweenLite, TimelineLite, and CSSPlugin), try changing them so they are using the same version number.


Since you see no error in the console, try going to the browser debugger in Chrome and turn on pause on exceptions. That should throw any errors in the console, that are silently failing. This way we can try and rule out errors in the console.




Thanks! :)



  • Like 3
Link to comment
Share on other sites

Have you tried console logging TweenLite? I haven't really seen any ruby on rails question here so can't suggest anything. But console logging the TweenLite will give you idea if it is being included in your project or not. If it does get logged then problem will be with your code and if not then problem will be with how you are including GSAP files in your app.


As I said that we have never received any ruby on rails question so chances are slim that someone might be able to help you. Maybe give it a try on ruby on rails forum as well?

  • Like 3
Link to comment
Share on other sites

As others have said, it's super difficult to troubleshoot blind, but here are a few things I wondered...

  1. Do you have another CSS style that's set to !important that may be interfering (overriding what GSAP is doing?)
  2. Is there a typo in your code? For example, misspelling transparent? 
  3. Are your click events firing at all? Maybe add a console.log() in there just to make sure you're even creating your tweens in the first place. Maybe the selector text has a typo or something(?)

I can't imagine that having slightly different version numbers would cause any problems, but Jonathan's suggestion is a good one (keep them all consistent). And yes, Sahil's suggestion to try console.log(TweenLite) is great - it'd certainly explain things if GSAP isn't even being loaded. 


I'm sure we can figure it out once we see a live demo of the problem. 


Happy tweening!

  • Like 1
Link to comment
Share on other sites

Thanks guys,


I've switched to using the ruby gem https://github.com/robertpataki/greensock-rails and now have all scripts at version 1.20.3


I know from console logging that the button click is firing and I just tried adding console.log(TweenLite) which gave me this:


(target, duration, vars) {
				Animation.call(this, duration, vars);
				this.render = TweenLite.prototype.render; //speed optimization (avoid prototype lookup on this "hot" method)

				if (target =…


I also tried changing the animation duration to 1 second. 


I've copied and pasted from codepen so no typo issues.


There are no !important styles to override color.


Pause on exception didn't catch any errors.


It's a frustrating one alright



Link to comment
Share on other sites

Hm, can you inspect it in the browser to see if the inline style is indeed getting updated properly? I wonder if you're using a framework that's actually changing the DOM and replacing the original target with something else. In other words, the target of your tween may not actually be the thing that you're looking at in the browser. Totally a guess. 

  • Like 1
Link to comment
Share on other sites

No, the inline style doesn't appear to be updating. I'm not using a framework like React or Angular, just jQuery.


I tried logging the variable I pass to TweenLite and Chrome seems to verify that it is the DOM element I'm trying to change.


var btn = $(this);
TweenLite.to(btn, 1, { color: "transparent" });


Link to comment
Share on other sites

I've never heard of this type of thing happening, but I bet there's something really odd about your setup. Is there any chance you can post it online somewhere so we can take a peek? The simpler the better. I'm really curious. I bet we can figure it out once we can see it and inspect it. 

  • Like 2
Link to comment
Share on other sites

Thanks guys, I've decided to abandon it for the moment as I've lost too much time trying to get it to work.

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.