chrisi51

thx @OSUblake that rethinking helped a lot https://codepen.io/chrisi51/pen/WNEgEwp now i have a working solution and hopefully just have to make it beautiful xD btw. the new concept is now: on start cloning the 3 tab <li> and append them as a <div> with display:none and on sliding to another tab the correspondending div becomes visible while the svg themself have opacity:0 unless you start to drag one. the dragged svg gets opacity:1 then and move back to its original position after dropping. if it was dropped on the dropzone (tree rectangle) than a new clone is put to the tree parents element.

Hey, i've getting into trouble because of overflow:hidden in combination with draggable. i want to decorate the christmas tree and for the black bubble it is working as intended (even far from being finished). But we want to organize the decoration items in some tabbed panes (the colored bubbles) and therefore i need to use overflow:hidden and so the items can't get dragged out of the panes. The workflow is to have an original element. Cloning it to make it draggable. dragging it to the desired place and if its dropped on the tree, clone it there again (with the correct x, y values) and move the first clone back to the original position (unseen) to make it available again. Do you have any idea how to have such an organization while not loosing the drag and drop function cause of the overflow:hidden?

@ZachSaucier now i got you ... and i came to this: gsap.utils.toArray(".clicker-wrap").forEach(function(clickerwrap){ let textbox = clickerwrap.querySelector(".textbox"); let clicker = clickerwrap.querySelector(".clicker"); bbox = clicker.getBBox(); clicker.style.transformOrigin = (bbox.x+bbox.width/2)+"px "+(bbox.y+bbox.height/2)+"px"; let tl = gsap.timeline({ }) .to(textbox,{autoAlpha:0}); clickerwrap.addEventListener("click", function() { tl.reversed(!tl.reversed()); }); }); the problem at all is that illustrator dont have a workflow to handle class names without letting other tools manipulate the exported svg.

i also tried to just put each eventlistener statically in the code like var overlayStateScene1 = gsap.timeline().to("#textbox-7",{autoAlpha:0}); document.querySelector("#clicker-7").addEventListener("click", function(event) { overlayStateScene1.reversed(!overlayStateScene1.reversed()); }); document.querySelector("#textbox-7").addEventListener("click", function(event) { overlayStateScene1.reversed(!overlayStateScene1.reversed()); }); instead of using any form of loops. And its exactly the same problem i also have the following polyfill for IE11, so if old Android got problems it should be handled here if (window.NodeList && !NodeList.prototype.forEach) { NodeList.prototype.forEach = function (callback, thisArg) { thisArg = thisArg || window; for (var i = 0; i < this.length; i++) { callback.call(thisArg, this[i], i, this); } }; } Actually i dont have a big amount of devices and the most of them are Sony 5 years old ones with almost same android version (7). And the browser was always google chrome. on my Android 10 devices its working with chrome and the built in default browser what ever that is But those devices also have much hardware. btw: i turned off any animations and the problem is still appearing. So the only things comming together here are: - massive svg element with a lot of nodes in it - some regular event listeners i made a copy and deleted ALL js except of those handlers and it still have the same problem .... than i dropped content out of the svg ... part after part and it was not changing a lot ... for some reason i saw some unoptimized text elements (the overlays) where the text had lot of tspan with single characters special positioned ... i fixed that before by changing the distance between 2 characters from auto to 0 in illustrator but there was a text correction recently and seems like the setting was gone. so i just fixed that on the fly and .... wow ... THAT was the problem!? i dunno why and how this can affect such a behavior but after i fixed those 5 textboxes, everything is fine again. it dropped approx 10kb from my 115kb svg so its not the main part or something like but probably it was the animation to fade them out at the beginning as this was always enabled when i did not used the jquery way.

something like that? https://codepen.io/chrisi51/pen/QWKNWoe im noob too and its not perfect but on wide screen it looks like haha

i dont know if its really the animations because as soon as i disable those 10 event listeners (or replace them with the jquery code), everything is fine so i thought something would have to be wrong with the event listeners in general and hoped for any experience with that. The clickers are a little animated too. ive updated the pen to show any possible sideeffects. the overlays are simplified in form of circles but in my real project there is just a path + some text.

Hey, i know, its not gsap related - well it is kind of gsap related, as i always got told, to replace jquery by native js and gsap ? i have an approx 100kb big svg file with a lot of animations in it (svg nodes animated by gsap) and the following elements are all nodes of this svg file, which is just inlined into the html. "#textbox-..." is an overlay like small box with additional text and "#clicker-x" is the button to open it. So it should be possible to open the overlay by clicking the clicker and closing it by either clicking the clicker again or clicking the overlay directly. i have the following jquery code: $("#clicker-7").on("click", function(){$("#textbox-7").fadeToggle()}); $("#textbox-7").on("click", function(){$("#textbox-7").fadeToggle()}); $("#clicker-6").on("click", function(){$("#textbox-6").fadeToggle()}); $("#textbox-6").on("click", function(){$("#textbox-6").fadeToggle()}); $("#clicker-5").on("click", function(){$("#textbox-5").fadeToggle()}); $("#textbox-5").on("click", function(){$("#textbox-5").fadeToggle()}); $("#clicker-4").on("click", function(){$("#textbox-4").fadeToggle()}); $("#textbox-4").on("click", function(){$("#textbox-4").fadeToggle()}); $("#clicker-3").on("click", function(){$("#textbox-3").fadeToggle()}); $("#textbox-3").on("click", function(){$("#textbox-3").fadeToggle()}); $("#clicker-2").on("click", function(){$("#textbox-2").fadeToggle()}); $("#textbox-2").on("click", function(){$("#textbox-2").fadeToggle()}); This code is just working as intended. on each click on one of the opener elements or the opened element itself it just toggles its appearance - fading in or out. Now i replaced this code with pure js and gsap: var overlayStateScene1 = gsap.timeline().to("#textbox-7",{autoAlpha:0}); document.querySelectorAll("#clicker-7, #textbox-7").forEach(function(elem){ elem.addEventListener("click", function() { overlayStateScene1.reversed(!overlayStateScene1.reversed()); }); }); var overlayStateScene2_1 = gsap.timeline().to("#textbox-6",{autoAlpha:0}); document.querySelectorAll("#clicker-6, #textbox-6").forEach(function(elem){ elem.addEventListener("click", function() { overlayStateScene2_1.reversed(!overlayStateScene2_1.reversed()); }); }); var overlayStateScene2_2 = gsap.timeline().to("#textbox-5",{autoAlpha:0}); document.querySelectorAll("#clicker-5, #textbox-5").forEach(function(elem){ elem.addEventListener("click", function() { overlayStateScene2_2.reversed(!overlayStateScene2_2.reversed()); }); }); var overlayStateScene3 = gsap.timeline().to("#textbox-4",{autoAlpha:0}); document.querySelectorAll("#clicker-4, #textbox-4").forEach(function(elem){ elem.addEventListener("click", function() { overlayStateScene3.reversed(!overlayStateScene3.reversed()); }); }); var overlayStateScene4_1 = gsap.timeline().to("#textbox-3",{autoAlpha:0}); document.querySelectorAll("#clicker-3, #textbox-3").forEach(function(elem){ elem.addEventListener("click", function() { overlayStateScene4_1.reversed(!overlayStateScene4_1.reversed()); }); }); var overlayStateScene4_2 = gsap.timeline().to("#textbox-2",{autoAlpha:0}); document.querySelectorAll("#clicker-2, #textbox-2").forEach(function(elem){ elem.addEventListener("click", function() { overlayStateScene4_2.reversed(!overlayStateScene4_2.reversed()); }); }); some more code but also working as intended. The only problem is, with each of those addEventListener Android (at least Android older v10) seems to extremly slow down the page rendering. it is freezing the whole phone and you have to multiple tap "wait" until chrome has finished the processing and the page is responding to any input. If i go back to the jquery code its instantly responding. Is there any i do wrong or what is bad practice? iphone is working without problems and also my newer devices with android 10 don't have a problem with the second code. I can't reproduce it on a simple example so the codepen is not that helpful in this case. Does anybody have an idea, whats going on here or where to place that question instead of gsap forum?

Yep, with this version i don't need to apply any further check ... can just use it as it was intended by me sorry for the late reply

mhh ok ... both seem to work: offset of 0.001 to end var random_start = Math.random(); var random_end = random_start + ((Math.random() <= 0.5) ? 1.001 : -1.001); or rounded start var randomstart = Math.round(Math.random() * 10) / 10; var random_end =random_start + ((Math.random() <= 0.5) ? 1 : -1);

Hey @ZachSaucier i made some progress on this. can you give me some code? i tried to invalidate the tl in the resize function and also tried to restart it afterwards but nothing resulted in a recalculated <div id="middle"></div> ... either the width, nor the y position. at least i've added timeline.reversed() and default duration and i ripped jquery but im not sure if this is really the best option on my end as i had to google a lot to get it working with native javascript

omg ... i just got a lightning in my head ... it seems like, start/end is not allowed to be like 0.5363453245 instead of 0.53 ... if i round the random value it seems to work. Is this a bug or intended?

i try to move all dots randomly started and randomly reversed along the given path from their origin position on ... so its looking like fireflys. For any reason it seems to stuck randomly for some of them.

ya i actually tried that but there was lot of problems occuring on that way. the animation have only to run if it is in viewpoint and so i have to kill and restart it different times. when i was going that way there were problems on the next restart but maybe its just missing start values ... probably i was close to the solution and didn't saw the forest cause of all those trees Thank you for leading the way

the end goal is to kill an animation but instead of just letting everything get resetted or disappeared or something like the active motion should animate a little further while the elements get opacity 0 as the movements of the objects are very random i can't predict them and so i would need to read it ... think of a flying missile which get code 0 and so looses its target ... its just passing by and explodes seconds later ? i tried a lot like killing the first animation as a complete callback of the new animation but that throws a lot of problems. its very abstract and i cant show you the actual problem cause of not allowed to show any content right now. maybe i can provide a minimal demo later. or just take this one: its the same project that was, what i thought off ... might be a big troublemaker to provide such a function

thank you for your feedback @ZachSaucier Something like that i was waiting for yep i really have to learn the full power of gsap to not fall back to jquery without any need of it - actually while reading your feedback i have no clue, what i could address to gsap instead of jquery but i will check that this is a good point, will also check that - btw. i meantioned to not have an idea, how to react on window resize. Is the only way to overwrite the whole timelime to change vh and vw used in the timeline? how to get timeline direction without asking timeline._ts? ok - i saw both on my readings and string form felt wrong in any way what do you mean? again jquery? or what is this related to? is there any special you would to address to ES6? as i have to support IE11 i cant use ES6 - does i?