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?

there is timeline.recent() which gives you the last added tween but the last added tween is not the actual current tween animated. Is there a way i can grep the information, which parameters are just in this moment animated? Most impressive would be a way to get "The object is just moving from x:20, y:20 to x:100, y:100" like start position and end position of the current running tween. Problem on that may be, that there can be multiple tweens currently running on the same time, which makes it harder, i guess. Thanks in advance.

Hey, i just built a new burger menu and would like to get some feedback, what do you think about. Sure, there a dozens of em out there but i wanted to build one on my own - also to get more familar with gsap Maybe you see some really bad DON'Ts so please tell me then actually i would have to update the vh and vw in the timeline on window resize Thank you

outch ... that is EXACTLY what i was looking for xD sorry, im so new to gsap and have to lean all those properties and stuff you can use in different contexts + broken english expertise Thank you @GreenSock for your help and especially for gsap and all its components! PS: this is by far the fastest and most active community i've ever seen when it comes to such individual questions. gsap and its forum helpt me so much the last days and only on that way im able to accomplish my project. i really appreciate that!

seems like i only can use the self object with information about direction in a separat scrolltrigger object, what u already mentioned. Isn't there a way to use it also on a timeline add function? @GreenSock @ZachSaucier at the moment i actually have a separate scrolltrigger object but the point is, that its very unflexible to handle according to the very long timeline. there is a central element following the scroll down animation so its always in the point of view. i have to start and stop an animation very precisely according to the position of my central element, what made me thinking about putting those functions into add() of the timeline. but then i get the described problem and there seem to be no way to determine the direction. I guess that would be a nice feature if its not already there and i just don't understand how to use it But i can go with your suggestion for the moment.

gonna check this tomorrow ... thx for pointing that out

@PointC What do you mean? did you changed any on your pen? i don't get it ?

just realized that i need another function to add xlink:href instead of textpath.setAttribute('xlink:href', "#masterpath"); you have to use textpath.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', "#masterpath"); so i can draw my paths now in illustrator and put text on em afterwards.

i don't know wether changing it is really the right way. i understand your pen, even if i did not knew, that there are stuff like that At least the functions createAnimation and stopAnimation are in wrong direction on the way back. could i add a function, which is checking, in which way we scroll and then call the propper function instead of calling them directly? on that way i also could handle the color switch, i guess.

Thank you for your response @PointC - its not exactly what i was looking for but it points out a way i could go probably. My main problem on this is, that adobe illustrator don't give me a way to place text on a path without dropping the information. instead it exports the text, where each letter is simply positioned, as it would follow the path. so path is gone and text is also gone. so i can't animate it afterwards. Just tried affinity designer which does the same So my plan was to just draw the paths, on which text will move along and than place my text afterwards via javascript. So i would be Independent of the design layer and also could switch languages. But for any reason the appending of the textpath is not working. I know its not really a gsap issue but hoped you will know this problem and give advice on how to fix it

Hey there, i did understood how text motion along a path is working but i struggle around with a problem, when i need to create the text element dynamically. For example if i have different languages or just random text, i would like to prefer to create those texts outside of illustrator. Something seems to be wrong with appending the path. I also don't get it working, if i have a static text element in the svg and try to append a textpath to it. Both of em seem to be correct according to dom inspector but they are somewhere out of the viewport as it seems. It was inspired by some Trick posts of @PointCbut everything was just static elements in the svg. What am i doing wrong?