Jump to content
GreenSock

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

Help, Just Starting, but my prototype works fine but not in context of a full site

Recommended Posts

I hope someone can point me in a right direction here. I created a simple hover spin effect () with TweenLite and of course it works great, just as I want it to, in a bare bones prototype page:

 

http://dev.overit.com/nysda/nysdental.org/_test/logospin/ (spinning glory, hover on button)

http://dev.overit.com/nysda/nysdental.org/_test/logospin/js/main.js (the JS that runs)

 

But in the context of the page I want to include this in, its not working at all. JS appears to load, jQuery hover functions fire fine, but the image I'm tweening gets no transform applied at all - when its in my page:

 

[uPDATE: I couldn't leave the page with the nonfunctioning spinner, so I had to replace the non-working GSAP with pure CSS that works though not as well, See my following comment]

http://dev.overit.com/nysda/nysdental.org/ (no spinning joy - the horror)

 

http://dev.overit.com/nysda/nysdental.org/sites/all/themes/nysdental/js/build/scripts.js (the js that runs, is minified)

http://dev.overit.com/nysda/nysdental.org/sites/all/themes/nysdental/js/source/scripts.js (the unminified source, search for "specialAnimations" or see line 266)

 

I have looked for things that are missing from my prototype like perspective on parent, or other CSS style that could be conflicting in a parent or ancestor node but I'm just hitting a wall. 

 

Can anyone help me out at all? 

Thank you

Link to post
Share on other sites

I don't see any evidence that you are loading TweenMax.min.js (or any other GSAP files)

 

http://prntscr.com/68wxpp

 

Looking through your minified files I don't see GSAP in those or any of our copyright information (which usually does not get minified).

 

Also I noticed that in one of your versions you are logging the "over" and "out" states

 

function specialAnimations(){
      // console.log('specialanimations')
      var $hoverfield = $('.band.baseperspective').first();
      // console.log('$hoverfield.length:',$hoverfield.length);
      var $flipLink = $hoverfield.find('.specialanimation.hoverflip').first();
      var $flipTarget = $flipLink.find('img').first();
 
      // console.log('$flipLink.length:',$flipLink.length);
      // console.log('$flipTarget:',$flipTarget);
      // console.log('$flipTarget.length:',$flipTarget.length);
 
      var localpath = 'sites/all/themes/nysdental/js/lib/TweenLite.min.js';
      var protocol = window.location.protocol;
      var sitepath = window.location.host+Drupal.settings.basePath;
      var scriptpath = protocol+'//'+sitepath+localpath;
 
      // console.log('scriptpath:',scriptpath);
 
      if($flipTarget && $flipTarget.length){
        // console.log('trying')
        $.getScript(scriptpath,function(){
          console.log('loaded')
          $hoverfield.hover(
            function(){
              // console.log('over $flipTarget:',$flipTarget)
              console.log('over')
              TweenLite.to($flipTarget, 1, {rotationY:360});
            },
            function(){
              console.log('out')
              TweenLite.to($flipTarget, 1, {rotationY:0});
            }
          );
        });
      }
 
    }   
 
But I see no logs or errors in the console which leads me to believe none of the javascript pertaining to that effect is loading or executing. 
 
That's about all I can gather.
Link to post
Share on other sites

Thanks for the response, unfortunately after a couple of hours I had to replace the GSAP with CSS only because I just had to have it working.  I still prefer the GSAP to the pure CSS but I couldn't see why it simply wouldn't work in the Drupal site though the code was based of a working GSAP prototype

 

There were no errors or warnings recorded on console, no 404, I do know that the JS file were being loaded, and the hover events were firing. Its appears to simply not made any changes to the DOM.

 

I guess I'd have to make a new test page that attempts the GSAP animation in the context of the website for you folks to really dig in, but I was hoping there was something known to cause issues that sound like what I'm seeing.  Do you know of anything like that?  A set of conditions that result in GSAP appearing to not run?

Link to post
Share on other sites

There is no common reason for GSAP not working on a real website, especially without any clear console errors. 

 

When I tested your page initially I ran a bookmarklet that checks for the presence of TweenLite and it came up empty.

When you get around to making your next test for us, please add this code to your js

alert("TweenLite version = " + TweenLite.version);

It will help us (and you) quickly verify that TweenLite is there. 

Try to keep the demo simple (as little css, js, html to simulate the problem in the context of your site structure) and we'll do our best to find the problem.

  • Like 2
Link to post
Share on other sites

You possibly checked the css-only version. I did post a link to my simple gsap version  (TweenLite.version returns 1.15.1)

its not a complex example.

 

But copying this into the site context unexpectedly didn't work, as I described.  I think the reason you didn't find TL version was because I had to comment out the JavaScript (line 266) and replace with a CSS only animation.  I could not leave it in place & broken.  You can also see it as an example of approximately what I wanted to do with GSAP

 

I did spend some time reviewing this ruling out many common things, but no solution. I has not ruled out these items:

  • pre/post processors - Bless, and Autoprefixer unintended side effects
  • SASS compile settings - using "official Ruby compiler" outputting compressed CSS output vs compact vs source 
  • Drupal's css and js performance settings - I'm using "Aggregate and compress CSS files.

It wasn't until now that I reconstructed the page with my broken GSAP attempt

Link to post
Share on other sites

Thanks for the updated example. It appears TweenLite is loading and your 'over' and 'out' are being logged (thanks)

 

However, my next guess is that there is a problem relating to how and when you are loading TweenLite.

 

    var localpath = 'sites/all/themes/nysdental/js/lib/TweenLite.min.js';
      var protocol = window.location.protocol;
      var sitepath = window.location.host+Drupal.settings.basePath;
      var scriptpath = protocol+'//'+sitepath+localpath;
 
      // console.log('scriptpath:',scriptpath);
 
      if($flipTarget && $flipTarget.length){
        // console.log('trying')
        $.getScript(scriptpath,function(){
          console.log('loaded')
          $hoverfield.hover(
            function(){
              // console.log('over $flipTarget:',$flipTarget)
              console.log('over')
              TweenLite.to($flipTarget, 1, {rotationY:360});
            },
            function(){
              console.log('out')
              TweenLite.to($flipTarget, 1, {rotationY:0});
            }
          );
        });
      }

 

Open on up the js console on this forums page you are on now and paste in the following code

TweenLite.to("body", 1, {rotation:360});

whoa, the whole page spins. This should work on any page that uses TweenLite.

 

I noticed it does not work on your "full site context" page, but does work on your simple reduced test case where you are loading TweenLite normally with a script tag

<script src="js/vendor/TweenMax.min.js"></script>

Please try that approach in your site and let us know if it works. 

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

  • Recently Browsing   0 members

    No registered users viewing this page.

×