Jump to content
Search Community

jimeast

Members
  • Posts

    92
  • Joined

  • Last visited

Everything posted by jimeast

  1. I'm going through the example code that was included on the nobel desktop Class Files CD. I notice in some examples they have 2 closing body tags. Was that intended? <body> <div id="speedGauge"> <img id="pointer" src="img/pointer.png" height="9" width="89"> <img id="center" src="img/disc.png" height="41" width="40"> </div> </body> <!-- load scripts after dom has been rendered --> <script src="js/gsap/TweenLite.js"></script> <script src="js/gsap/plugins/CSSPlugin.js"></script> <script src="js/gsap/easing/EasePack.js"></script> <script src="js/jquery/jquery-1.10.1.min.js"></script> <script> $(document).ready(function() { var $pointer = $("#pointer"), $gauge = $("#speedGauge"); }); </script> </body>
  2. That fixed it, I didn't know you could refer to id as a class, I have much to learn. Thanks a bunch. On further review I find if I comment out or remove the trigger entry in css it makes no difference if I setup the trigger entry as a class it doesn't work at all. As long as there is no entry for trigger in the styles and every span element has a class of trigger I can drag the player as long as the mouse is over the text of the span. This works the same in all browsers.
  3. My project works fine in codepen, Chrome, and Opera but not in Microsoft Edge or Firefox (latest versions of both). You can see the problem if you use FF or Edge to navagate to http://www.jimslounge.com/fplanet/ You can move the player around just fine and you can actually work the audio controls but the pointer icon is stuck on move so it's confusing to use. My script only has one line of code it is Draggable.create("#player"); I'm wondering exactly how I would prevent propigation on that.
  4. I've tried that and when I do I get only 1 message Uncaught ReferenceError: Draggable is not defined
  5. Since my example code is so simple I thought it might be best to just lay it out here rather than use codepen. When I run the following code in firefox I get no error message but it doesn't drag either, in Chrome I get 2 errors: Uncaught SyntaxError: Unexpected token < dragTest.html:20 Uncaught ReferenceError: Draggable is not defined(anonymous function) @ dragTest.html:20 Here is my code: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>drag test</title> <style type="text/css"> #smallBox { position: absolute; width: 100px; height: 100px; background-color: red; } </style> </head> <body> <div id="smallBox"></div> <script src="gs/min/utils/"></script> <script> Draggable.create("#smallBox"); </script> </body> </html>
  6. Maybe if you namespace your code like // Set namespace. var NS = {}; then prefix your vars with NS.
  7. This is something I've been working on. http://codepen.io/jimeast/pen/QyxPXK?editors=1010 it just uses a couple of lines gsap inserted at the end of a block of JS I found elsewhere.
  8. That was it!! Thank you so much!
  9. I have 2 lines of GSAP so far in my project they are at the very end of the js code and they enable the background to scroll. All the tiles scroll until you get to the last tile and the main animation starts over. I tried to fix the problem by making the timeline a continous loop by adding -1 like this var tl = new TimelineMax({repeat: -1}); . That just causes every image to animate constantly which will eventually cause the whole thing to grind to a halt. I'm pretty sure it's a simple scope issue maybe I need a reference to a containing scope I'm not sure.
  10. My last reply didn't take I must have marked solved first but I wanted to add this. The <base> tag placed before the img tags saved me from having to put the full path in the img tags. <base href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/105814/"> Thanks for the help!
  11. Wow that's nuts I had to double click then right click to get a list of info with the address among them. Fortunately they all start with the same string https://s3-us-west-2.amazonaws.com/s.cdpn.io/105814. I saw mention of tag in the html I can use to enclose the list of links that will pass on the value of that string. I forgot what it was, do you know?
  12. Sorry to bring up something that's only somewhat related to GS but I couldn't find a codepen forum. I was going to make a codepen pertaining to a problem I'm having migrating a background slideshow to GS. What I'm migrating from can be seen here If you watch for about 40 secs you'll notice the backgroung image does a nice cross fade to the next image. I want to see if that is possible with GSAP. On the way to doing that I noticed that imaged I uploaded to codepen weren't displaying. I get this message " Failed to load resource: the server responded with a status of 406 (Not Acceptable)". As you can see the images are there.
  13. I just now tried it on Chrome, it didn't work on Firefox but works fine on chrome. Thanks!
  14. I thought adding perspective would work but wrapping the target div in a div with id of wrapper and adding the following css isn't working. #wrapper { perspective:300; -webkit-perspective:300; } I tried applying the css plugin but maybe it doesn't work with jquery.gsap.min.js?
  15. When you run the pen you made it works? It seems to run the same for me.
  16. Using jquery.gsap.min.js plugin I run TransformOrigin, it runs but the box won't scale like it does here, http://greensock.com/css3/, and it slows down at the end. I tried adding the css plugin but no change. my codepen: http://codepen.io/jimeast/pen/PZjMvv
  17. I found an answer, I just tacked on a TweemMax command and it worked so the animations are powered by GreenSock!
  18. After the jquery cdn I added the cdn for TweenMax.min.js then the cdn for jquery.gsap.min.js. The code works but I don't know if the animation is caused by jquery.animate or gsap plugin. How can I tell?
  19. Love it, made it an internet shortcut on my desktop.
  20. Could someone point me to an example of a horizontal multilevel drop down menu in gasp? I gotta believe someone's done this already if I could even find one that's not multilevel I could probably figure how to make it so.
  21. jimeast

    Particle system

    I found a vortex sort of thing you might like. http://codepen.io/jimeast/pen/Kpmzwx
  22. I've tested on Chrome, Opera, IE11, and Firefox and it only works in Chrome and Opera but I found if I wrapped the svg in a div which I give the same dimensions in css it works!!! I just went back and read your post so if I can't wrap in a div I'll have to sleep on it.....hummmmm
×
×
  • Create New...