[exclude child elements from transform]

Just now, Sahil said:

I doubt that it can be done without calculations. Maybe you can use element as background so you won't have to deal with parent child calculations.

Thats what i thought too.  Thanks for your help.

[exclude child elements from transform]

1 hour ago, Sahil said:

The position of child element is determined by parent so you can't find any built in solution for something like this in CSS or in most javascript libraries. You will just have to tween child element with same negative value at the same time.

 

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

 

 

Thanks, that's great, but what do I do if I also need more complex transformations such as rotation and scale? is there a way to do this without complex calculations of the transform origin etc.?

 

for example:

See the Pen mprQVr by beamish (@beamish) on CodePen

 

 

[exclude child elements from transform]

Hi,

 

Is it possible to exclude child elements from being affected by a transform? specifically in the linked codepen: is it possible that the div containing the 'X' will not be moved even thought it's parent is being moved?

 

Thanks !

 

Elior

 

 

See the Pen GyjXvX by beamish (@beamish) on CodePen

[Draggable ghost element]

Hi Jack,

 

Thanks for the quick reply, didn't expect on the weekend, sorry if I disturbed you.

 

I decided to avoid the 'autoScroll' option at the moment, it isn't quite necassary for me at the moment, and things seem to work well now,

 

Thanks again,

 

Elior

[Draggable ghost element]

Hi,

 

I'm using GSAP's Draggable, and I noticed that while the users starts dragging, a hidden ghost div is appended to the div which contains the dragging element.

This is what is looks like:

<div style="visibility: hidden; height: 1px; top: -1px; pointer-events: none; position: relative; clear: both; width: 585px;"></div>

Is this necassary? Can I eliminate this div OR eliminate it's width (because it widens the container div incorrectly) ?

 

Thanks,

 

Elior

[global timeline ticker?]

Hi,

 

I have many TimelineMax animations either running at the same time, or not running at all; is it possible to create an event that will be called everytime any timeline is ticking, and get the timeline that is ticking in that event? 

 

an alternative would be to set a simple javascript setTimeout call but only if I can tell if there are currently no running animations; is it possible to check if ANY timeline is currently running?

 

Thanks,

 

Elior

[problem with two seperate timelines of the same div]

Hi Carl,

 

Once I remove the 'add()'s the problem is resolved, so it seems that these 'add()'s were causing it... I don't know why there's a difference with or without these 'add()'s, but it doesn't really matter as long as there's a solution

 

Thank you !!!

 

Elior

[problem with two seperate timelines of the same div]

I'm having a tough time understanding exactly what you mean here - it sounds like it should be relatively simple for you to recreate in a codepen in a few lines of code, right? Could you please do that so that we can understand the context and give you a solution? We'd love to help. 

 

OK, I gave it a try and here is a link to the pen code which seems to show the problem: 

See the Pen rWMzJy by beamish (@beamish) on CodePen

 

there are 2 timelines for the same div; in the end of the JS code I first seek the 0 time of the second timeline where the autoAlpha is 1 - but immediately after that I seek the 0 time of the first timeline where autoAlpha is 0 and try to play it ... why then do I see the div with full opacity right at start, and why can't I play the first timeline?

 

Notice that if I comment out 'tl2' then 'tl' plays well; if I comment out just the 'seek' call to 'tl2', so 'tl2' is only created but never used - the same problem remains.  If I change 'autoRemoveChildren' to 'true' then it works, but I don't want this because I need to rerun the timeline again and I don't want to recreate it each time I need to run it...

 

Thanks !!!

[problem with two seperate timelines of the same div]

I'm having a tough time understanding exactly what you mean here - it sounds like it should be relatively simple for you to recreate in a codepen in a few lines of code, right? Could you please do that so that we can understand the context and give you a solution? We'd love to help. 

Hi Jack,

 

*** please see the next message from me in this topic, where I managed to create a pen the shows my problem, thanks ***

 

Thank you for your kind motivation to help

 

I understand it's difficult to understand the situation, it sounds simple but it isn't. what happens is that an array of data items are tranlated by javascript code into the properties of the tweens creating the timeline.  This happens for 2 arrays creating 2 timelines for the same div.  at first only the secondly created timeline is working right; however if I re-run the code for the first array it both work.  the strange thing is that the timeline of the first array IS created even when it does'nt work as expected, I can see it has children reflecting the relevant props.  This timeline has 2 tweens, the first with opacity 0 and the second with opacity 1.  when I seek and pause to time 0 then the div is properly displayed with autoAlpha 0; however when I seek and pause even to 0.01 - I see the full opacity of 1, and not a slight change above 0 as expected (the second tween's time is right, set to 2.0, and the first is 0).  Perhaps this can give you a clue as to where I should look for to find the cause of the problem?

 

Thank you so much again,

 

Elior

[problem with two seperate timelines of the same div]

 

Use 1 timeline, and speed it up on reverse. Something like this...

// Forwards
tl.duration(2).play();

// Reverse
tl.duration(1.5).reverse();

 

Hi,

 

Thanks,

 

The point is that I need two separate timelines (because not always will the last tween of the first is the same as the first tween of the second)..

 

Elior

[problem with two seperate timelines of the same div]

Hi,

 

I'm facing a problem in a complicated web application which is difficult to isolate into a pen, so I was thinking of just sharing the situation and perhaps getting some possible clues as to what to look for to understand why this problem happens:

 

I have one DIV with 2 TimelineMax timelines.  Each timeline is made of two tweens of this DIV.  In the first timeline the tween starts at autoAlpha 0 at the first tween and ends at autoAlpha 1 in the second tween, and in the second timeline the situation is the opposite: starting from autoAlpha 1 and ending at 0.  The duration of the two timelines is different: the first is 2 seconds, the second is 1.5 seconds.  Other than that there is nothing else.

 

Now I create these two timelines.  The second one runs perfectly well.  The problem is in the first: it "jumps" directly from autoAlpha 0 to 1 without any smooth chage between the two states.  If I recreate the first timeline then it works well with smooth changes (and the second one is also smooth as it was before).

 

Any suggestions as to where to look?...

 

Thanks !

 

Elior

[Using Draggable rotation with '50% 50%' transform origin on a 'top left' origin element]

Thanks

[Using Draggable rotation with '50% 50%' transform origin on a 'top left' origin element]

Hi PointC,

 

Thanks !

 

I've added some code to the pen you suggested to add the rotation functionality: 

See the Pen MeYdXE by anon (@anon) on CodePen

 

Cheers,

 

Beamish

[Using Draggable rotation with '50% 50%' transform origin on a 'top left' origin element]

Hi

 

I need the origin to be in the top left because I'm adding functionality that enables the user to resize the element and the resizing should not be from within the center of the element but from the top left corner.  The user is also able to rotate the element but the rotation is more intuitive and friendly when originating from the center of the element and not from the top left corner.  I hope this clears things...

 

Thanks for showing interest

 

Beamish

[Using Draggable rotation with '50% 50%' transform origin on a 'top left' origin element]

Hi,

 

Is it possible to make an element that has a transform origin set to 'top left' rotate (using Draggable rotate) around the element's center, as if the transform origin was originally set to 50% 50%?

 

I was thinking perhaps to temporarily changes the transform origin yet keeps the element in the same position in the onDragStart event and in the onDragEnd event to restore the 'top left' origin, is that possible? 

 

Thanks,

 

Elior

See the Pen JKoyXE by anon (@anon) on CodePen

[resize container height on overflow?]

thanks; we'll wait and see...

[resize container height on overflow?]

... well, I managed to solve this in the following pen: 

See the Pen ZWmExz?editors=1111 by beamish (@beamish) on CodePen

 

even though this seems rather expansive in cpu time.  any alternatives?...

 

Thanks

[resize container height on overflow?]

Hi

 

Is it possible to have a container automatically resize it's height when a div inside of it is moving outside the container's height?

 

in this pen -  - will it be possible to have the blue containing box automatically resize it's height when the contained red smaller box reaches the blue box bottom?

 

Thanks,

 

Elior

See the Pen LNXYGN by beamish (@beamish) on CodePen

[How can I trigger a Draggable 'onClick' event?]

thank you very much !

[How can I trigger a Draggable 'onClick' event?]

Hi,

 

I certainly understand your question .  I have a rather complex application hence I cannot give an example.  I noticed a strange behavior that happened when I was dragging an object, and that behavior disappeared after the user clicks on the object.  At first I tried to put the same code there is in the 'onClick' event in the 'onDragEnd' event but it didn't work... I was hoping to trigger the 'onClick' event as a workaround... I know it's not good practice, I suppose I have no choice but to figure out what was the bug that created that behavior and to fix it..

 

Anyways thank you for you concern and good will !

 

Elior 

[How can I trigger a Draggable 'onClick' event?]

Hi,

 

How can I manually trigger an 'onClick' event in a Draggable object? 

 

More specifically, I want to trigger it from within the  function called in reply to the 'onDragEnd' event.

 

Thanks !

 

Elior

[nested timelines]

..any idea when version 17.1 will be available not as beta?...

 

thanks.

[nested timelines]

Thanks.

[nested timelines]

Thanks

[nested timelines]

any news?...