Jump to content
GreenSock

Sahil last won the day on November 25 2018

Sahil had the most liked content!

Sahil

BusinessGreen

  • Posts

    1,002

  • Joined

  • Last visited

  • Days Won

    71

 Content Type 

Everything posted by Sahil

  1. Sahil
    I was going through documentation and tried Draggable library and found a possible bug? But seems impossible to stay undetected. I thought I should report it. So if element passed to Draggable doesn't exist it throws error and javascript stops working as well. Are we suppose to make sure element exists and then create Draggable object?
  2. Sahil
    Right, passing id without # works on id in the presence of MooTools. Well conflicts are frustrating but less than seeing GSAP animations when I didn't know about GSAP and I kept saying to myself I know nothing about animations. Until I found out how those smooth animations were done. Thanks, great library!
  3. Sahil
    I never used MooTools selectors, problem is with GSAP selectors while using it with MooTools. To prove my point check my last code where I use jQuery selector and code works fine, removed $() to get rid of jQuery selectors and GSAP fails(in presence of MooTools). Remove jQuery to use GSAP with MooTools only and GSAP selectors will fail(take a look at my first codepen). I don't know if MooTools is doing it wrong or GSAP, neither is problem of Joomla because above code is single HTML file with similar behavior. My knowledge isn't that deep but I guess when we declare noConflict before MooTools, it takes control of more than just $ sign and affects GSAP in the process. GSAP developers should look into it. Finally if anybody comes to this thread with same problem, I will recommend to use jQuery selectors. Thank you.
  4. Sahil
    I am sorry but I have made it clear in few previous replies that I follow recommended methods to add script. And you must have noticed that problem only occurs when there are multiple elements involved. Now this is the edited code which shows that the problem is with GSAP's DOM selector when using with MooTools. You can also take a look at very first codepen in this thread which shows GSAP with MooTools works fine while using "this" to animate but it fails to animate when used div to select elements. <!DOCTYPE html> <html> <head> <title>GSAP n Mootools</title> <style> div{ display: block; position: relative; height: 100px; width: 100px; background-color: #234455; margin: 10px; } </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script>jQuery.noConflict();</script> <script src="https://cdnjs.cloudflare.com/ajax/libs/mootools/1.5.1/mootools-core-full-compat.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.16.1/TweenMax.min.js"></script> <script> jQuery.noConflict(); (function($){ $(function(){ $("#one").click(function(){ TweenMax.to($("#one"), 1, {left: "+=100"}); }); $("#two").click(function(){ TweenMax.staggerTo($("div"), 1, {left: "+=100"}, 0.2); }); }); })(jQuery); </script> </head> <body> <div id="one"> </div> <div id="two"> </div> <div id="three" > </div> </body> </html> In above code I have used jQuery selectors which shows jQuery isn't affected at all but GSAP DOM selector gets affected instead. This code and very first codepen shows that GSAP DOM selector fails.
  5. Sahil
    Yes from very start I never used $ symbol and out of all the different ways I tried to get to the root of the problem, only disabling noConflict in plugin which stops that single line file from loading worked for me, which makes me believe is the problem. And while I was typing I tested it locally as I am not sure if I can edit codepen this way, here is code that confirms noConflict before MooTools affects GSAP. <!DOCTYPE html> <html> <head> <title>GSAP n Mootools</title> <style> div{ display: block; position: relative; height: 100px; width: 100px; background-color: #234455; margin: 10px; } </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script>jQuery.noConflict();</script> <script src="https://cdnjs.cloudflare.com/ajax/libs/mootools/1.5.1/mootools-core-full-compat.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.16.1/TweenMax.min.js"></script> <script> jQuery.noConflict(); (function($){ $(function(){ $("#one").click(function(){ TweenMax.to(this, 1, {left: "+=100"}); }); $("#two").click(function(){ TweenMax.staggerTo("div", 1, {left: "+=100"}, 0.2); }); }); })(jQuery); </script> </head> <body> <div id="one"> </div> <div id="two"> </div> <div id="three" > </div> </body> </html>
  6. Sahil
    Finally I have found the problem and solution. I was using a plugin called eorisis: jQuery to manage all scripts and styles. 1. I disabled MooTools and everything worked fine. 2. I re-enabled MooTools and disabled plugin, thinking maybe itself might be causing problem but problem remained. 3. Finally in this plugin there is option to enable/disable noConflict mode and after disabling it all three libraries worked fine together. Both Joomla and this plugin adds single line file to remove jQuery conflict and files load in following sequence 1. jQuery 2. noConflict file 3. mootools So now as long as all extensions I use follow recommended methods while using jQuery I wont have any conflicts, right? And to be honest I don't yet completely understand this issue as how come defining noConflict before MooTools is affecting GSAP?
  7. Sahil
    I was using jQuery in noConflict mode anyway but still it doesn't work for me. For now I have disabled MooTools, I will update this thread when I find solution. EDIT: @Jonathan Yes I followed recommended methods while adding scripts and used jQuery without $ sign, and even wrapped it the way OSUblake suggested to make sure, but so far problem persists.
  8. Sahil
    hi OSUblake thanks for your support so far, following is codpen where events are implemented using jQuery. On clicking second div both divs move to right. With mootools I can tween single element at once but while tweening two elements like in this codepen, it causes problems. http://codepen.io/Sahil89/pen/RWwmoO?editors=101 I guess I should get on MooTools forum to find any solution or maybe Carl must know how to get rid of this problem.
  9. Sahil
    That's same as using "this" in jQuery, and no, I don't even use mootools. Joomla documentation says they dropped it almost two years ago but still they have it in their contact form and some third party gallery plugin I am using. So main problem is I can't tween two elements at once though for now I can disable mootools in current project, it will be great if I find permanent solution to get both libraries co-exist as a lot of joomla extensions still use mootools.
  10. Sahil
    jQuery is fine still I tried wrapping it just to make sure and behavior didn't change. I spent some time as any tween on those pages wasn't working except hover event, which I was calling tweening elements using 'this'. So with mootools, GSAP has problem while tweening multiple elements. Following is codepen with two divs, first works as it tweens using 'this' reference and second tween doesn't work when tweening multiple elements. http://codepen.io/Sahil89/pen/LpYvaQ
  11. Sahil
    @OSUblake Sorry it doesn't work with delay either. I am using Joomla and I can confirm the Mootools library is causing problems though I have jquery in noConflict mode. I was done with layout but wanted to migrate all my animations(nothing complex) to GSAP. I have two tweens right now. One for hover event which works fine when using delay and other one fires on document.ready, which throws the error and except on firefox other tweens stop responding. But with delay other animations work, without delay javascript stops altogether. @Carl Yes, not seeing plugin made me migrate completely to GSAP.
  12. Sahil
    So adding delay works for me now as that's what I was going to do with tween anyway but is there any other way I can make sure this problem doesn't occur? The same code works on all other pages and Firefox only chrome, IE(doesn't fire the tween but rest of animations work), Opera has the problem with two pages.
  13. Sahil
    I am using GSAP in a CMS site which loads a lot of javascripts on certain pages, and two of such pages throws following error from TweenMax library, I can list all the libraries it is loading if necesarry. This certain error only happens if I launch animations on document.ready event but if I use timer(which is how I am going to use it in future) then this error don't occur, still I would like to know what might be causing this to happen. EDIT: This error doesn't occur in firefox. Also I would like to know if jquery plugin is being dropped in future as its documentation is removed?
×
Login Create Account