ajhalls

It is a lot of info, and I don't expect most people to read it but we are offering our services for $50/month where most other companies are $300-$500/month. I need people to know that we still have all the important features, we just charge less

I can do it in Illustrator, the reason I thought of GreenSock was remembering this demo: https://greensock.com/?example=sortable-grid-using-draggable which seemed like the perfect type of solution. Create a transparent block for each line of text, rotate half of them 90 degrees and jumble the order. For some reason I didn't notice the options on JasonDavies.com that let me pick the orientation. Setting it to 2 between 0-90 degrees gives me something easy to work with in illustrator, but it would have been cool to be able to drag and sort them with GreenSock using something like that example.

It has been a while since I was playing with GreenSock and was getting ready to send off for new business cards when I thought I would do a word cloud on the back side. I have been looking for something online and have found a few good ones, but the good ones don't group words on the same line together, and the bad ones leave tons of space between words. Eventually I remembered all the cool stuff OSUBlake and others have done with Draggable / Sortable and just wondered if someone would help me out. This one uses d3 to group them by line, but leaves tons of space between: https://www.jasondavies.com/wordcloud/ Wordle makes the nicest looking ones, but there is no grouping at all - and you have to use IE / Safari because it uses Java: http://www.wordle.net/ I don't usually just ask for help without demonstrating all the work I have done first, but I am feeling out of my depth and short on time. If nobody feels like taking on the project, I understand, but I hoped someone would take an interest in it as a fun thing to have under their name. Here is my word list: REDUCE NO-SHOWS REACTIVATE PATIENT FAMILY MESSAGING AUTO CONFIRMATIONS TWO-WAY TEXTING NO CONTRACT NO SET-UP FEE IMPORT OLD REVIEWS GOOGLE REVIEWS FACEBOOK REVIEWS DAILY TASK REPORTING MULTILINGUAL SUPPORT CUSTOM AUDIO OUTBOUND CALLS POWERFUL EMAIL LIST TOOLS FIND PAST DUE BALANCES INCREASE RECALL SCHEDULING CUSTOM MARKETING GROUPS CUSTOM EMAIL TEMPLATE BUILDER CONTENT LIBRARY DEMOGRAPHIC TOOLS ATTENDACE REPORTS UNLIMITED PHONE, TEXT, EMAIL CUSTOMIZABLE AUTOMATED PATIENT COMMUNICATION HOLIDAY EMAILS BIRTHDAY MESSAGES FEEDBACK REQUEST SOCIAL MEDIA

Thanks guys, for now it isn't working out. I may be missing something stupid, but for now I am going to move on to the next feature. I just couldn't figure out how to set the background-image property when using escaped / single and double quoted text without using the base64. It isn't the end of the world, it was just a nifty thing I wanted to do.

Thanks Jack, I guess it is a little of all of the above. I can modify how I am storing it in the DB if that helps, but I had problems figuring out how to assign it as a background any other way than how I did it. I got the patterns from http://www.heropatterns.com/ which look like this there: background-color: #DFDBE5; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='%239C92AC' fill-opacity='0.4' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E"); If it were you starting with this data, and you wanted to animate it, what would you do? I am assuming I can't store it anymore as base64 since you can't animate that. It isn't just a matter of rendering it, but setting it as a BG to a div as well. I am looking at the ideas posted just now by Blake.

I am trying to figure out a solution to a problem. On my banner animation GUI I am building I am integrating some built in css / svg backgrounds. All the backgrounds are stored in the database, but the SVG's seemed more complicated because of the single / double quotes / escaping html entities and so on. The solution I found was to convert the SVG to base64, but then I can't animate it - that I know of. I was thinking of using greensock to have a "shimmer" type effect where it can slowly draw the background and then undraw it and repeat. Unfortunately the only way I could figure out to store it / render it results in a base64 image as the background. Here is a stripped down codepen that lets you adjust opacity and scale, on my site it also can adjust color which would end up then storing it as the base64 in the db. I currently have it stored in the DB like this: <svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'> <g fill-rule='evenodd'> <g fill='#F00' fill-opacity='0.4'> <path d='M0 38.59l2.83-2.83 1.41 1.41L1.41 40H0v-1.41zM0 1.4l2.83 2.83 1.41-1.41L1.41 0H0v1.41zM38.59 40l-2.83-2.83 1.41-1.41L40 38.59V40h-1.41zM40 1.41l-2.83 2.83-1.41-1.41L38.59 0H40v1.41zM20 18.6l2.83-2.83 1.41 1.41L21.41 20l2.83 2.83-1.41 1.41L20 21.41l-2.83 2.83-1.41-1.41L18.59 20l-2.83-2.83 1.41-1.41L20 18.59z'/> </g> </g> </svg>

Thanks Blake, I played with it last weekend and got it to show 3 different levels of zoom detail which cleans things up a lot like your first example. One of these days I am going to take a serious interest in Canvas solutions http://codepen.io/ajhalls/pen/KWxZGN

I stumbled across a cool CSS ruler yesterday that only needed minor modifications to be zoomable. I was able to zoom 20 simultaneously without any lag https://codepen.io/ajhalls/pen/PpeVmE Other rulers that also had interesting potential: http://codepen.io/j4n/pen/wBVVVN https://codepen.io/pbweb/pen/grQKEK http://jsfiddle.net/thirdender/kwcug/ http://codepen.io/j4n/pen/wBVVVN

Thanks guys, I did play a little with the canvas idea and was getting blurry lines which made me google fuzzy text which led me to this: https://www.html5rocks.com/en/tutorials/canvas/hidpi/ It seems as Craig mentioned that it should be potentially better for all the small items, where maybe instead of adding each individual span and positioning it, I just have a single item for the black lines like this: context.fillText("| | | | | | | | | | | | | | | | | | | | | | | | | | | | ", -150, 0); Then I could have a single one for all the red lines, and one for the numbers and then only am scaling 3 items instead of 600. I haven't spent hardly any time on the canvas idea, I was hoping someone had a genius idea to share before getting too far into it since everything already worked with this version, it was just slower

I was working on my timeline GUI (https://ajhalls.github.io/Simple-Animation-Timeline-for-Greensock/) and noticed that when I zoom in and out (using the vertical slider), I get some big lag in the rendering of the timeline ruler / timeline elements. I am currently just using the CSS "left" setting to position everything and am wondering if there is a more efficient way of doing it. I am not sure if I should be using GreenSock, or using a Canvas to reduce the number of things being rendered. I currently render a "|" character positioned in a span for every 10 milliseconds, so within a single 5 second timeline I have 500 elements, plus the major lines and numbers which brings it up around 600. On my main application, I can add multiple objects which each have their own timeline of 600 elements, but all are zoomed simultaneously meaning we are redrawing thousands of items as you drag the slider around. Now depending on the precision of what you want the slider "steps" to be, that could be hundreds of render times between a value of 1 and 2. Here is the code that gets called when the value of the slider changes: function drawRulers() { var timelineHeader = $(".timeline-container-header"); var scrubberHandle = $(".scrubberHandle"); timelineHeader.html(""); timelineHeader.html(""); for (i = 0; i < timelineLength; i += (10 * 1)) { spacing = (i * Number(ZoomValue) + 18); var tickMarks = "<span class=\"minorTick\" style=\"left:" + spacing + "px;\">|</span>"; timelineHeader.append(tickMarks); } // Numbers and red lines for (i = 0; i < timelineLength; i += (100 * 1)) { spacing = (i * Number(ZoomValue) + 16); var numbers = "<span class=\"timelineNumbers\" style=\"left:" + spacing + "px;\">" + i + "</span>"; timelineHeader.append(numbers); var majorLines = "<span class=\"majorTick\" style=\"left:" + spacing + "px;\"><b>|</B></span>"; timelineHeader.append(majorLines); timelineHeader.css("width", spacing + 100); } $(".timelineElementRow").css("width", spacing + 100); $(".timeline-container").on("click", scrubToTime); scrubberHandle.draggable({ axis: 'x', containment: "parent", drag: function(event, ui) { scrubberValue = ($(this).position().left - timelineScrollValueLeft) / ZoomValue; scrubberHandle.css("left", $(this).position().left); progress.html(scrubberValue / 1000); mainTL.time(scrubberValue / 1000).pause(); insertTime = scrubberValue * ZoomValue; } }); } Is there a better method that will perform faster using GreenSock? I haven't ever worked with Canvas, so it isn't my first choice, but it seems like it may be a better solution.

I made some good progress on it, here is the result: http://codepen.io/ajhalls/pen/pRmNVd?editors=1010 A couple things I noticed. I haven't ever used paper.js, so I am not sure why it is behaving this way but you have to click the "Reload" button AFTER the panel is visible. For some reason the code refuses to create the instance without it being visible. I got around it by using a timeout to delay it, but I thought I would leave the bug there in case someone knows what I was doing wrong. $("body").on('click', ".easingEditorTab", function() { setTimeout(function() { RebuildEditor(); }, 300); }); Other than that, I noticed the same thing OSUBlake did which is that the regular easing values from the customStrings data here: http://codepen.io/GreenSock/pen/JRyNQg doesn't work, but the data from the bottom of the window does. To demonstrate I put in a saved option called "Saved Spring" which you can load from the menu, all others fail to load. Of course I could recreate all the normal easing curves, but it might be worth figuring out why the two aren't compatible with each other - and yet both work when passed as variables into TweenMax.

Thanks Blake, that is an excellent example of how to reset the bounds each time something is moved.

For what it is worth, the issue seems to be a lag in the .endDrag() getting executed. I have tried numerous ways to get it to stop when I tell it to stop, but it always continues just a little beyond. For instance: function checkHit(obj1, obj2, obj3) { PanelWidths = [resizingPanels[0].css("width"), resizingPanels[1].css("width")]; console.log(PanelWidths); if (parseInt(PanelWidths[0], 10) <=15) { draggableHandles[currentHandle].endDrag(); } if (obj3){ if (parseInt(PanelWidths[1], 10) <=15) { draggableHandles[currentHandle].endDrag(); } } } This should stop right at 15, but looking at the console I get: ["177px", "23px"] ["181px", "19px"] ["184px", "16px"] ["188px", "12px"] I also tried to increase the dragResistance as it got closer to the end to slow it down, but then it get jumpy where as it hits the slowdown boundary it jumps back about 30px. function checkHit(obj1, obj2, obj3) { PanelWidths = [resizingPanels[0].css("width"), resizingPanels[1].css("width")]; console.log(PanelWidths); if (parseInt(PanelWidths[0], 10) <=35 || parseInt(PanelWidths[1], 10) <=35) { draggableHandles[currentHandle].dragResistance=0.5; }else{ draggableHandles[currentHandle].dragResistance=0; } if (parseInt(PanelWidths[0], 10) <=15) { draggableHandles[currentHandle].endDrag(); } if (obj3){ if (parseInt(PanelWidths[1], 10) <=15) { draggableHandles[currentHandle].endDrag(); } } } I can try retranslating things like I did in my last post, but I haven't figured out the combination of resizing the panels under the handles to keep the division under the handle, instead it keeps sneaking out just a little As always, I can work around it, but it is worth mentioning that endDrag isn't as instant as I thought it would be, It doesn't seem to be a delay in the hitTest function since it fails on this other example as well. My work around ended up looking like this: function checkHit() { PanelWidths = [resizingPanels[0].css("width"), resizingPanels[1].css("width")]; if (parseInt(PanelWidths[0], 10) <=1) { draggableHandles[currentHandle].endDrag(); TweenLite.set($("#panel-"+(currentHandle+1)), {width:"-=1"}); TweenLite.set($("#panel-"+currentHandle), {width:"+=1"}); TweenLite.set($("#bar-"+(currentHandle)), {x:"+=1"}); } if (parseInt(PanelWidths[1], 10) <=1) { draggableHandles[currentHandle].endDrag(); TweenLite.set($("#panel-"+(currentHandle+1)), {width:"+=1"}); TweenLite.set($("#panel-"+currentHandle), {width:"-=1"}); TweenLite.set($("#bar-"+currentHandle), {x:"-=1"}); } }

Thanks Blake, what I came up with is a modified checkHit() that just moves it back 6px. I could then also modify the function that sets the duration to subtract that 6px from the calculation to end up with a 0 duration. It still fails if you go too fast, but for average use it is fine. function checkHit(obj1, obj2, obj3) { if (draggableHandles[currentHandle].hitTest(obj2, "0%")) {// left side draggableHandles[currentHandle].endDrag(); TweenLite.set($("#bar-"+currentHandle), {x:"+=6"}); } if (obj3){ // right side if (draggableHandles[currentHandle].hitTest(obj3, "0%")) { draggableHandles[currentHandle].endDrag(); TweenLite.set($("#bar-"+currentHandle), {x:"-=6"}); } } }

This seems to be working better using the .hitTest() function rather than bounds, if they collide, I endDrag(). One of the issues I am having though is that they work great if you are dragging slowly, but if you drag faster, they end up overlapping slightly which then makes it pretty hard to drag again as you have to keep inching it away. Any tips to adding a buffer of some kind there? http://codepen.io/ajhalls/pen/EZrmgB?editors=1111