Greg Stager

I put as much of the thing together as I could in code pen but was not able to re-create the failure. I am beginning to think the problem is something else my authoring environment is doing that breaks it when interacting on mobile.

I created a "calculator" that uses draggable sliders to set the various values associated with each one. It seems to function exactly as expected on a PC. However, when pulling it up on an iPad - the sliders will respond to touch and go up and down just fine but the values will only change once instead of changing constantly along the full range of the slider. The sliders do not lock up or anything - they continue to move but it seems the onDrag function does not fire after the first time like it does on the PC. Is there another consideration related to this that I should have in mind when making something work on mobile? Here is an example of the code for one of the slider knobs. Draggable.create("#knob3c", { type: "y", bounds: {minY: 0, maxY: -180}, onDrag: function() { y3Pos=Math.ceil((this.y*-50)/1000)*1000; cap(); calc(); } }); As the slider moves it should constantly update the calculations by determining a value based on slider position and calling a couple other functions to deliver the final result. Again - it works fine on PC.

? Nice!

Bummer - this method would have worked much slicker than having 30+ tweens.

I am having a little trouble working a variable into an object name. For instance, suppose I have 30 boxes named box1alpha, box2alpha, box3alpha, etc. I have tried to drop a variable in the middle of an object name and it seems to work the first time but when the variable is changed it doesn't. In the codepen - I am expecting each box to move down with each click as the num variable is incremented. How can I get the animation to read the new variable on subsequent plays?

Thanks, Zach - I admit to not being 100% sure how it works but I am also not sure where to focus my question so I will at least keep toying with it to try to better understand it.

LOL - Hmm... maybe I am not using it. I wasn't changing the text so I wasn't following the example in docs the same way. I guess I wasn't sure what to expect when using it. I saw some SplitText demos but not as much on this so I thought I was just tweaking to make it look OK and wasn't at all. That's funny.

I am playing around with the textPlugin and was trying to get an effect where it looks like the text is coming out from a thin box. The effect looks fine when animating "to the left" as the text is revealed starting at the beginning of the sentence. However - the effect looks odd when animating "to the right" for the same reason. I was trying to see if there was any way to reverse the direction and reveal starting from the end of the sentence but I did not see one in the docs. So - is there some sort of direction parameter with this? Hopefully the pen makes sense of what I am trying to do.

I am entering one for this week. (Best viewed at 50% in this thread) A bunch of slides to make a special message based on the good old fashioned Tanagram puzzles. Enjoy! https://codepen.io/Arelwynn/pen/ExPNapV

Worked like a charm! Thank you. wrap360(this.rotation); //spot on

That does sound promising. I will play with that tomorrow. I am playing with an analog clock where you can drag the hands around to set the time. Right now I am snapping every 30 so hours and minutes land on each number. 1=30 2=60 3=90 etc. I want users to be able to drag any direction without restriction when setting the clock but using this.rotation to grab the “position“ of the hands and converting was getting hosed when going negative or into more than one complete revolution. I was looking there too, dang, looked at clamp and normalize but something didn’t seem right with those for this. Must have glanced over wrap. Its cuz I stayed up past my bedtime.

Is there a way to bind values but not movement? Here is the idea... On a rotation type draggable, I know that I can always pull current value by using this.rotation and I can set bounds to lock the rotation of the object between 0 and 360. I am wondering if I can allow the draggable to continue going forward or backward without binding the movement but have the rotation value only return a value between 0 and 360 regardless of the number of revolutions? I was hoping there was an easy way without figuring out some sort of formula. So instead of 1 and a half revolutions returning 540 it will still just return 180 and backward rotation of -30 would return 330 but so would a backward rotation of -390. I tried using an array but that actually had the same effect as setting boundaries.

Perhaps this is a silly suggestion but I will throw it out there anyway. In my attempts at learning many of the GSAP tools, I was playing with the Motion Path Helper and used it to craft my own signature path by adding in several points and adjusting all the curves as necessary. It took some time but it worked and I was pleased with the result. No need for masks and such. I later used the same strategy to make a thank you to the gang with this pen. Maybe it will foster an idea...? https://codepen.io/Arelwynn/pen/poJmrWx

I think you’re right. Looking more carefully, the title does say “images rotation”. I saw circular and rotation and nothing but that circular rotating clock for the first couple seconds and got excited that I might actually be able to help. Jumped the gun - I did.

A place to start might be to view the Rotate An Object tutorial found here. Also - here is a really basic CodePen to do something similar. https://codepen.io/Arelwynn/pen/YzwzYZy