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

Perhaps I am a bit over my head on this one but using the browser dev tools - I was not able to find a reference to any gsap libraries. The closest thing I could find was a single reference to a greensock plug-in - not sure about its age. I can confirm that the site appears to function on my desktop and not on iPad. Looks like a WordPress site...? Perhaps this is more of an issue on the WordPress side and mobile support or perhaps compatibility related to that plug-in...? I dunno - just throwing out some thoughts. As an aside - I noticed the little red dot that follows the cursor - I would imagine that would be lost on a mobile device as there is not a mouse. Could that be a source of conflict as well...?

Glad to hear you have it going!

I wonder if it is finding your .js file... You might try troubleshooting that by dropping a script tag in your html file within the body tag. <script> gsap.from("#title, #musicStyles, #aside", {opacity:0, scale:3, duration:1, stagger: .75, ease:"power2"}); </script>

I see you are missing quotes around your src for the gsap library in this post...

I am guessing a syntax/format issue somewhere, then. When I pull your animation into single html file to my server it comes up OK. Your server settings may be more strict than CodePen or Brackets where some mistakes may simply be ignored.

Try bringing them in at the beginning in your head tag. <html> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/gsap.min.js"></script> ...

I cannot tell from the codepen - how and when are you bringing in the gsap library for your web version?

Here is the next installment of the series. Plenty for this weekend. Here we are simply combining each of the four effects shown in the first four episodes to animate a single object. Enjoy! Episode 5: Combine Effects

Here is the next installment of the series. I went ahead and tried typing and talking at the same time per some feedback from @OSUblake I also went with a slightly larger video to accommodate bringing in the preview page. Enjoy! Episode 4: Resize An Object

Good feedback - perhaps I will go ahead and record typing up the example for the next one. I am not the fastest or most accurate typist so you won't have to worry about me going too fast. ?