Xristi

Thank you mvanelgjen. I'm doing very well with my animated arrows thanks to you and GSAP!!! Most appreciated.

OK. Somewhat comforting to know that things like this happen to people as talented and accomplished as you Thank you for all your help, Xristi

Hi, not sure you can help me with my new barrier to success because you solved the problem that I posted. The animation runs perfectly on the page I submitted for the codepen. However, when I ported the code to the actual page for its intended use, it did not show when its function was called. So I fiddled around with the css and html code. The changes I have made either kept the svg from appearing or, when it did appear it was preceded by the completed svg appearing, then the animation. Is there something I am doing wrong that rings a bell, or should I repost?

Thank you for your quick reply. As I get better at animating SVGs with GSAP I'll use more shapes. Right now, I only use the triangle described by a path (written by me). Sure would like to use Boxy and, in fact, I just downloaded it. I used Inkscape for a little experimentation and it had a selection in Edit that gave a path for the object just drawn. Does Boxy have that? You used the word "export"; What is exported? Thank you for teaching me stuff!

I'm sorry... more learning to be done. What is the name of the program you used to generate the SVG for the triangle? Thank you!

This is wonderful!! Thank you so much. I am so grateful that you decided to post a reply even after my "fixed" edit. I meant that I thought I had fixed my code to run even though I didn't like the result ; wrong. It didn't run but I thought someone might still look at the code and you did! I not only learned exactly what I need to know with regards to this important animation in my ITS, but learned a lot about posting a pen. Such a thorough response - you are to commended as well as thanked... Xristi

My code pen uses two different functions to separately animate a line and the arrowhead that travels along the line's path at the head of the lengthening line. I used a timeline to try to synchronize their movement, keeping the arrowhead at the head of the animating line moving towards its target. Quite unsatisfactory even with no eases. This can't be much of a problem, but in all my searching I can only find objects moving along a static path. Spent a lot of time on this (of course I learned a lot, too); if anyone can help I'd be most grateful.

I am puzzled by the fact that I use this animation of a progress pyramid with SplitText and it runs just fine on all other pages but not this one. Anyhow, I removed the rotation aspect (don't really need it) and the pyramid works just fine. Thank you for your always timely attention to my questions...

Hi, getting a warning of "Invalid property rotation set 180 Missing plugin? gsap.registerPlugin(); I have gsap 3 and I changed my tl variable to gsap.timeline() but still get this message. Of course, the program still runs locally but, in reading about this problem it probably won't run when I finally get the program on the internet. Is gsap.registerPlugin(some plugin); the fix? - if it is, where does it go? Thank you!!

Hi Jack, Great explanation! Thank you!!

Hi Craig, One more thing... After I have declared the variable for the delayedCall and killed it can I bring it back to life via the variable?

Yes! gsap is being read... now, can I instantiate a delayedCall that I have declared a variable for - I know how to kill it now but not how to give it life!

Thank you, Craig... got it. I've gone to many different gsap pages - don't recall where the link is except that it said "How doI get it?"

Hi Zach, The link only tells me of the changes made for gsap 3. I did find a link called "How to get it" but it's dead.

I try to establish a variable for my delayed calls so I can kill them under certain circumstances. When I use the form var dC_1 = gsap.delayedCall(1, myFunction); as suggested gsap shows an error as undefined. What do I need to import to eliminate the error? When I use var dC_1 = TweenMax.delayedCall(1, myFunction); I get an error as well. I am a Shockingly Green member... perhaps I should upgrade some of my gsap imports?

Never mind... found the list. Thank you anyway

Hi, I want to use the ScrollToPlugin. As a SimplyGreen member is this available to me? If so, how do I download it (or make it available to my scripting efforts)?

Yes... for sure. But the conflict exists in the larger page - not something I would expect anyone to dig through I'll just keep whittling away. If it does get down to a manageable codePen and I haven't found the problem I'll send a codePen at that point. Many thanks!!

Thank you for your replies. Before including the DnD functionality (using draggable elements that are absolutely positioned in a relatively positioned grid) on the main page I created an abbreviated trial page. It works fine. When transferred to the main page, though, the hittest no longer fires even though all elements have identical id's and css properties. I just thought that there might be a scope issue with "this" as there is mention of onDragEndScope in the documentation but there is no "+" to click on for more information. Again, I am grateful for all of your help over the years but sending a minimal codePen wouldn't seem to help much... I'm in the process of comparing the two instances to find the anomaly causing the problem. Thanks again.

Hello. I have 3 different grids containing the same elements in the same configuration. They occupy the same position on the page and their presentation is controlled through style.visibility (either visible or hidden) with none of the grids showing initially. I use Draggable functionality in which the draggable elements are positioned absolutely and the drop areas are positioned relatively. My trial version drag and drop hit-test works just fine but it has just one of the grids and it is visible from the start of the page presentation. The actual page described previously does not register the hit-test and the DnD element always returns to its home. I'm thinking perhaps scope for "this" needs to be defined but can't seem to find any documention on how to do it. I have tried "focus" on the grid presently showing but that didn't work. This is a Draggable create situation with "this.hitTest" and the drop area element has been thoroughly checked. Going on a day and half trying to figure it out. I'm learning by doing and most probably am missing a simple concept. I would be grateful for any ideas, information, or instruction.

Hi, Thank you for your quick reply... I created a CodePen @ https://codepen.io/storyproblemdoctor/pen/JjjbjJE

Hi Jack, I am changing from hit-testing a draggable to using the liveSnap referenced above (posted 09/24/2017 ~ not sure I should use the poster's name) with my drag and drop functionality. How would your script change if the draggable is required to move on both the x and y axis? I have created a page that approximates yours but uses a grid to put the draggable and the target in two different rows. Currently, when the draggable has snapped to the target it snaps back to the target when moved positively along the y axis, but if it is moved negatively (up) the draggable does not return to the target as long as its position is negative relative to the target - just sticks there. When moved on the x axis it will return to its "home".

Hello Zach, I was able to arrive at a solution. Between your comments and OSUBlake's and Diaco's codepens for multiple drag objects and multiple targets I was able to piece together some code that worked. Thank you all for your time in helping all of us grateful GSAP users.

OK. I'll give it a try.

Yes. I get the x/y coordinates but the the tween doesn't complete. When I put your "this.x..." in the onComplete function x/y comes back undefined. Why would the tween not complete? Some other part of my code must be wrong...