Greg Stager

There is a setting in your Safari app to disable the desktop website request. That has allowed my drag and drop as well as other stuff to work on my iPad with Safari.

Thanks, Blake. No - but I just checked out a couple and those are cool. I had considered typing the code up as I spoke and decided not to as a way to keep the videos shorter. I do plan to add some interactive elements, though, like when I get to drag an object. I also have an occasional activity planned as well. Should be fun.

Here is the next installment of the series. Enjoy! Episode 3: Fade An Object

Awesome! Glad to know they may be useful.

Here is the next installment of the series. Enjoy! Episode 2: Slide An Object

In another thread - I had posed a question about tutorials that seemed as though it had a fair amount of support. This thread is for sharing some of those ideas. As I played around, I ended up with something slightly different than my original thoughts but the general concept remains. This is the first of hopefully many which I will continue to link in this thread as I make them. Remember - these are aimed at beginners just like me. Happy to entertain any ideas to make them better. Please enjoy "Tales From A Rookie". Episode 1: Rotate An Object

I wonder if sometimes the best skill set for the job is the one not mentioned in the advertisement or the folks who really need you post the available position with the sort of title that wouldn't exactly jump out at you. I am not exactly a hard core coder. My background is mostly in education but I have some schooling in application development as well. I work for a large manufacturing company developing training resources - mostly of the interactive online type where I use my development skills. I never would have expected that one day I would be in the industry I am in now - I saw a totally different path - but I am very happy where I am. So while it might mean learning a little bit about another industry, product, or process - you'd be surprised at some of the places where your talents can shine. I might go so far as suggesting finding someplace that you know has a reputation for being a great place to work, get your foot in the door in some other capacity and find ways to demonstrate your value by using your skills to fill gaps in creative ways. Who knows? You might end up using your talents in ways that you and your employer never thought would happen - and you'll love it!

Thanks, Zach but I'm not convinced I understood correctly either - I just tried to make #2 look like #3 but perhaps I was really only doing the same thing a slightly different way than OP is looking for. ?‍♂️ It is still good practice for me - I just don't want to lead folks astray too much.

I only tweaked the code for animation #2 using fromTo and it looks close. Is that what you wanted? https://codepen.io/Arelwynn/pen/LYpqoVw

I have not played with this to give a working sample but I wonder if you might be able to achieve this using gsap.fromTo I may go ahead and play with this but I am sure someone else much more fluent will have something faster. LOL

As I continue to learn the ins and outs of GSAP, I find it helpful to "document" what I learn. One of the ways that I do this is by trying to create an example one specific thing at a time like moving an object, fading an object in or out, rotate an object, etc. It seems to me that these sorts of examples could be helpful for other beginners and thought I would share some of those examples here and there as "mini tutorials". Perhaps more of a video documentary of a beginner's journey. I thought I would ask if there was a better place to share them than randomly throughout the Q&A forums since they would not be questions in and of themselves. Do folks think there would even be any interest in such a thing? If not - I will simply jettison the idea.

Hmm.. certainly a lot going on there. If I am not mistaken - looks like some jQuery code in there as well. would need to include those libraries as well. But - all that aside - Not sure I would call trying to copy paste from a codepen “basic training”. As a beginner - I would advise against copying and pasting code as a means to learn this craft. I would suggest starting small and keying it all youself. That will help you to be much more “intimate” with your own code because you’ll know firsthand how all the elements came to be and how they fit together. Just my two cents.

This was about as basic as I could make it. Perhaps it will help you see where your issue is hiding. <html> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/gsap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/Draggable.min.js"> gsap.registerPlugin(Draggable); </script> <style> #box { height: 75px; width: 150px; background-color: #ff0000; } </style> </head> <body> <div id="box"></div> <script> Draggable.create("#box", {}); </script> </body> </html>

OK - all I had to do was type this post. I got it working. I ended up using the mouseleave to set a variable so that I could write an if statement in the draggable declaration to endDrag if = 1. Whew - Didn't want that on my conscience all weekend.

Taking it in the shorts on a Friday. Always one or the other but not both. I can get the mouseleave to work fine with a log to the console or some other proof using a variety of different methods but then I cannot seem to get it to execute the endDrag. I can get the endDrag to execute when I write it within the Draggable declaration but then I cannot seem to get the mouseleave to work. So I've been successful at getting them both to work separately but not together. I am clearly missing something needed to pull it off. I've tried several combinations of functions writing them both in and out of the Draggable but not much progress. I thought if I used the mouseleave on the image itself being used as the draggable and have it call endDrag that it would work OK - that way, anytime the mouse falls off the draggable it would snap back. Perhaps I am going about this whole idea the wrong way.

Yes, the two buttons/knobs are independent embedded animations laid on top of the surrounding graphics. They are embedded as iFrames. I would prefer differently but that part is outside of my control. What was odd to me is that three browsers had three different reactions to it with Edge being perfect (gasp ?). The mouseleave/dragEnd suggestion seems promising so I will play with that.

OK - In Firefox I can twist the box and release my mouse outside of the embed and it is fine. In Chrome, if I release outside the embedded CodePen you see the "stickiness". In my actual project - in Chrome if you simply go outside the dimensions of the element itself - it happens. You must always be in contact with the element for it to work right.

OK - I didn't get the exact same result through CodePen but I did get something similar. In Chrome, if I rotate the blue box and bring the mouse into the editor area and release, the box will not snap back and I can freely move the mouse around without holding a button down and twist the box. When I click on the box again, the issue releases. I will try it again after posting this to see if it does the same in the embedded editor. https://codepen.io/Arelwynn/pen/pojLQXJ

You're right - the code for the draggables is not complex. I know I can recreate the basic functioning parts. Let me see if it will show the same problem. Gimme a few moments

LOL - It is a mostly complete working draft project in a published (non-CodePen) form rather than a minimized demo - I know that is preferred. The code would not be visible like with a CodePen but I could share a link if you at least wanted to see the behavior I am referring to.

I have a published project that has two simple draggable elements. One is a momentary three-position switch that rests in the center and will drag (rotate) 60 degrees in either direction and "spring" back to center. The second is a push-button / turn knob that you push to lock and then give a small 15 degree twist to unlock it. No questions about those but I am curious about any experiences you have witnessed between browser behaviors. This was just a little context. The element boundaries do not overlap at all. I witness three different behaviors in three different browsers. In Chrome - if you drag one of the elements and continue past the boundary of that element and then release - it freezes In Firefox - if you drag past the boundary and release - it is good as long as you don't release within the boundary of the other element. In Edge - you can drag and release anywhere without issue - even within the boundary of the other element. (desired behavior) Has anyone else experienced other odd results between browsers and have any guidance on how to begin troubleshooting a fix for them?

OK - so how do I fix the broken codepen positioning? I have tried positioning with percentages, straight up pixels, and using gsap.set for scaling to 50% since that seems the best view when you set that in the embedded codepen above. It only seems to work closest to my actual codepen when dropping from 1x to 0.5x Edit: I am going to take a guess at my own question. It might have something to do with the viewbox parameters. I admit I don't fully understand them. I used the numbers I did because they were the ones that allowed me to view the objects on my screen without being wildly huge or only showing a piece of it. I derived them by simply changing the values and watching how things moved on screen and nudged things where I wanted them but it is still a bit confusing to me.

OK - I got the sample I was playing with to work the way I was visioning. Now to use the real images and see if it will behave the same way. @mikel I like that example and you make a good point about old syntax. Thank you for putting that in your post. I think I am too new to gsap that I do not always recognize what is new and what is old, or how old it is. I search forums or watch videos and sometimes get stuck trying things that will never work for me due to the mismatch of versions. I try to look at the age of the post as a guideline but in a case like this - it is a new post and so someone else who is learning this like me would be looking at this not necessarily know that it was old.

Good thinking - I just might be able to pull that off. Seems easier than a mask, anyway.

Ugh - this totally went off when embedding it to the forum - for now - best viewed at 50% on this page or out at the codepen site.