[Speed up single property within a staggerFrom]

Not sure, but if I had to do it I would have just animated that property separately with extra line of code.

 

See the Pen ZJJEGE by Sahil89 (@Sahil89) on CodePen

 

[Accordion with dynamic height according to content inside]

Try animating using className so resulting values aren't applied to element.
 

tl.from(collapsible_element, .5, { className: "+=heightZero" }, 'open');

 

See the Pen EvXqRe by Sahil89 (@Sahil89) on CodePen

 

[Getting target element in Draggable]

Thanks.

[Getting target element in Draggable]

Hi,

 

I have multiple elements in a container and I am using draggable to be able to drag them, after spending a lot of time I came to realize that in draggable using 'this' doesn't let you access target element using jQuery or TweenMax. So how can I access the element that is being dragged? I have attached a simple codepen where I am trying to set padding on target element, I tried many different properties but no changes.

 

Thanks

See the Pen jLygod by Sahil89 (@Sahil89) on CodePen

[Non Animatable CSS Properties?]

Fixed your code pen.

 

You were calling initialAnim function which isn't present. In pen you can see how to assign tween to a variable.

 

And no, the flex-direction property does not animate.

[GSAP animations and Joomla! 2.5, 3.x]

I had sort of similar problem while using TweenMax in Joomla, I was using firefox and it didn't show any errors in console window. The problem was due to MooTools which you can solve by setting jQuery as selector for TweenMax,

TweenLite.selector = jQuery;

[Lingering actions on hover (once translated)]

That's because of jQuery, mouse events are bound to mouse rather than elements. You will need to track mouse position globally and maybe check position in onUpdate callback in your opentheNav timeline.

 

http://stackoverflow.com/questions/4403518/jquery-hover-not-triggered-when-element-is-programatically-moved-under-the-mouse

[Anything I can do smarter in this 3D rotator?]

You are great help on this forum, thanks a lot.

[Anything I can do smarter in this 3D rotator?]

Thanks a lot. Your solution for z-index is really interesting plus I can use any ease with it. The second example is too complex for me to quickly wrap my head around.

 

Can I compare z value of divs for depth? and How?

[Anything I can do smarter in this 3D rotator?]

I was trying to make a 3D rotator and it works as expected. I am using onUpdate callback to adjust z-index but I was wondering if there a smarter way to get it done?

 

Also this example only works with fixed width, I tried to make it responsive but timeline doesn't update values once it is created.

See the Pen qOqyrb by Sahil89 (@Sahil89) on CodePen

See the Pen wKorbr by Sahil89 (@Sahil89) on CodePen

[Uncaught Cannot tween a null target. Draggable bug?]

While using static hitTest method, is there way to detect which element is on top? For example, return true only if first element is on top else false?

[Uncaught Cannot tween a null target. Draggable bug?]

Clicking on draggable element gives mouse position as zero. Or it depends on different libraries we use to detect click position? Like in this case it is jQuery.

 

See the Pen EVaqqZ by Sahil89 (@Sahil89) on CodePen

[Uncaught Cannot tween a null target. Draggable bug?]

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?

See the Pen meyagj by Sahil89 (@Sahil89) on CodePen

[error cannot assign to read only property of '_gsTweenID']

 

So the issue is most likely that TweenLite finds MooTools' $ and passes selector strings off to that.

Its failing because $ only supports ID.

 

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!

[error cannot assign to read only property of '_gsTweenID']

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.

[error cannot assign to read only property of '_gsTweenID']

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.

[error cannot assign to read only property of '_gsTweenID']

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>

[error cannot assign to read only property of '_gsTweenID']

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?

[error cannot assign to read only property of '_gsTweenID']

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.

[error cannot assign to read only property of '_gsTweenID']

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.

 

See the Pen RWwmoO?editors=101 by Sahil89 (@Sahil89) on CodePen

 

I guess I should get on MooTools forum to find any solution or maybe Carl must know how to get rid of this problem.

[error cannot assign to read only property of '_gsTweenID']

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.

[error cannot assign to read only property of '_gsTweenID']

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.

 

See the Pen LpYvaQ by Sahil89 (@Sahil89) on CodePen

[error cannot assign to read only property of '_gsTweenID']

@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.

[error cannot assign to read only property of '_gsTweenID']

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.

[error cannot assign to read only property of '_gsTweenID']

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,
 

 

Uncaught TypeError: Cannot assign to read only property '_gsTweenID' of .

 

 

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?