Jump to content

Afrowave last won the day on July 5 2015

Afrowave had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


Afrowave last won the day on July 5 2015

Afrowave had the most liked content!

About Afrowave

  • Birthday August 5

Contact Methods

Profile Information

  • Gender
  • Location

Recent Profile Visitors

6,290 profile views

Afrowave's Achievements

  • Week One Done
  • One Month Later
  • One Year In

Recent Badges



  1. What?! No React? 😆 There is a project I have been working on for some time @msagerup and these GreenSock guys here are the best. I wanted to use React just for the routing within the app but the client did not care. So I have been forced by the nature of the work to learn JavaScript itself, DOM APIs and CSS just as @OSUblake said. I can feel your excitement, especially if you see the GreenSock showcase. But get a solid base with JavaScript and GreenSock will be a breeze. It just makes sense when you work with it. Give yourself 3 to 6 months, depending on how much time you have.
  2. You have a point @ZachSaucier. Let me try it out with a table. Sometimes it is the easier things that escape our attention. I was wondering if I could use snapping to associate a draggable with the div it is "in". It does now. 😅
  3. Hi GreenSocksers, I have a very interesting project as you have noticed by now. 😁 In this case, I need to compare an element in one cell with another. I have a game-name draggable on the left side of the table and the game-tool draggable used to play the game specified by the left-side game-name on the right side of the table. I have an object with the contents of the matched IDs of the draggable buttons, consisting of the game names and the game tools. As it is now, a game-name settles on the left side of the table and a game-tool settles on the right side of the table. I have the first line with Racing and Hurdles already done manually to give a visual of what is intended. Basically, once a game-name draggable settles, it should check for whether the game-tool draggable in the next div node corresponds to tool used in the game and vice versa for a game-tool settling first. I was thinking that if I can find a way to make the draggable have a relationship with the div it settles in, I can then compare the IDs of the draggables with an object that has all the relationships. I went through the GSAP Docs, and I was whether Snapping can be used for something like this.
  4. Just looked at the solution again. Logic errors you say, @OSUblake? You are being polite. Thank you again.
  5. @OSUblake, Wow! I know! I think I was a bit dramatic but I could not see the trees in the forest. Everything was a blur! 😁 Thank you and thank you Jack@GreenSock. GSAP is brilliant. With all due respect to the competition, there isn 't any! 😆
  6. Now to the "meat and potatoes" of the question. In Draggable 2.1, I am targeting the top left div with the id of Dev_1. With this target in place, my buttons can tween back to place when dragged slightly off their original position. If the button is dragged onto the table, it behaves at is should in this case, if it does not get to the target div, it goes back to its origanal place. Very good. In Draggable 3.2, I have set the target to be any div that has the class of addRed. There is a slight difference here. If the button goes onto the table it behaves as it should because there is a specific target based on the denoted class. Very good. But, if you drag the button, say, in between the other buttons, it is not able to tween back to its original position. Hence the question, before the button enters the table and before the target div is highlighted, why is the now off-original location, dragged button not able to tween back to its original position when released? It seems that the dragged button must have a predefined target that is identified with an ID, to be able to tween back to its original location, even if it does not come close to the designated target, to answer @Friebel. I hope that makes sense.
  7. 1. Changed Draggable to 3.2. I hadn't noticed. 2. The Old GSAP was taken from one of your old posts. It was for demonstration. 😅 3. I removed Inertia from GSAP 3.2 and now it works as it should. I had not idea of the conflict. Of course, I am activating two tweens onRelease and onDragEnd.
  8. Dear Greensockes, 😄 Draggable of GreenSock 2.1 is only able to specify its target option element through an Id. If you target the first of a bunch of divs with classes only, it gives this error “Uncaught TypeError: Cannot read property 'getBoundingClientRect' of null”. So I decided to try GSAP 3.x and the latest and greatest 3.2. But I found another quirk, for lack a better word. The code pen attached is an exact replica of one done in GSAP 2.1 here. The gsap.to() that replaces the TweenLite.to() does not seem to work as it should. In my case, if the draggable button does not get to the target, it is to TweenLite.to(button, 0.3, {top: button.originalTop, left: button.originalLeft}) back to its original position. If it does get to its target, it is to TweenLite.to(button, 0.3, {left: target.left, top: target.top, x: 0, y: 0}. If it does the button in GSAP 3.2 gets offset in an arbitrary way. Something changed. But I don't know what.
  9. Dear Greensocksers, 😀 Is there an exact replacement for the `TweenLIte.killDelayedCallsTo()`?
  10. Thank you very much @OSUblake and @ZachSaucier. I did build the SVG path on the fly with path completion. The final "Trace SVG by joining the Dots".
  11. I see. That means it should not be like how jQuery does it?
  12. ??? Thanks Zack. Have an excellent day.
  13. Nice, very nice. You guys have made GSAP so easy. Is scrollContainer part of scrollTo variables? Is this documented somewhere that I can't seem to find? I am beginning to feel not too clever.
  14. If you go to the pen, it would fit into something like this: function Update(){ scrollDiv.progress( aud.currentTime/aud.duration ); scrollDiv.to("#Scroll_Text", 10, {scrollTo:{y: scrollDiv.progress() * "max"}}); }; That way, I don't have to keep guessing how long the inner content is so that the scrolling action fits perfectly all the time.