Jump to content


  • Posts

  • Joined

  • Last visited

Recent Profile Visitors

262 profile views

SpaceMoney-01011000's Achievements

  1. I would like to add an example I made. It's not the most original idea, but I'm actually elated I made this, and kind of proud of the results. https://codepen.io/scottonanski/full/VwxWwRj
  2. So, I decided to dig in and figure it out. I'm happy to say that I did. I'm thankful for your solution. It made me think about what was going on to make everything work together. These are the results; https://codepen.io/scottonanski/pen/VwxWwRj The only issue I can't seem to figure out is how to get the eases to fire off. EDIT: Silly me. I had a transition on the cube itself within the CSS.
  3. I've been looking at some referral code, but it's written in an older version of GSAP (see provided pen). I understand what I'm looking at, but am not sure how I would go about converting what I'm looking at into something written with GSAP 3 syntax. I was wondering if someone would be willing to explain, or provide a quick snippet, of what the following would look like written using GSAP 3; btn1.click(function()//front face { if(cubeParent[0]._gsTransform.rotationX != 0) { TweenMax.to(cubeParent, 1, {rotationX:'0_short'}); TweenMax.to(cubeParent, 1, {rotationY:'0_short'}); TweenMax.to(cubeParent, 1, {rotation:'0_short'}); } else { TweenMax.to(cubeParent, 1, {rotationY:'0_short'}); TweenMax.to(cubeParent, 1, {rotation:'0_short'}); } }); I'm not concerned with the function portion of the code. I understand what's going on there. What confuses me is how to use the gsap.getProperty() in place of the _gsTransform() in this specific use-case scenario. As far as the TweenMax.to() is concerned, I'm good to go in that area - so there's no need need for further explanation. I've already looked at the docs here, but I don't understand how the two correlate in this particular context. Kind regards, X
  4. Thank you. The problem with your example is that it's using older solutions; JQuery and and older version of GSAP. I'm not knowledgeable enough about JavaScript to be able to decipher what's going on to accomplish what I need. Do you have any other resources (other than the docs, I don't find them to be well written as they presuppose too much prior understanding) that are more simple, yet demonstrate similar functionality? I don't understand certain tokenization of the syntax; [0] &[1]. I understand they're array indices, but that's about it.
  5. I edited this post because I guessed I could probably attempt to figure out the solution myself. How do I can an ease:'bounce.out' to work on my pen?
  6. Okay, now I see what's happening... The small squares are animating at the same time, but if we remove the"<" position parameter, then the small squares animate in chronological sequence. I didn't notice it because it was so subtle. After your explanation, I see what's going on. Thank you for taking the time to answer my question!
  7. Greetings! I'm looking at an example from Most Common GSAP Mistakes and I'm curious what the string "<" in the syntax represents? When I delete it, it doesn't do anything, and when I change it I don't see any changes. Here are the lines I'm curious about; .to(squareTop, {fill: "#32e0c4"}, "<") .to(squareBottom, {fill: "#32e0c4"}, "<") I understand that two small squares of the animation are receiving a change of color, but not sure what "<" is affecting. If anyone would graciously be willing to take a moment to help me fill out my understanding, I would be very appreciative. Kind regards, X
  8. Ah! Good to know! Thank you, kind sir.
  9. What are gsap.effects? I ran across this post, but wasn't sure if gsap.effects.swapText() was custom method. I read the docs, but it isn't clear if these are baked into GSAP or if they're something I make...
  10. Okay, now I get it! The .to() method of the gsap object can have parameters passed in, as an object - denoted by the curly braces, and the key/value pairs - which is the vars object. Or, something like that. Good to know! Thanks so much guys!
  11. SpaceMoney-01011000


    I keep coming across this term in the GSAP literature, but I'm confused as to what it means, or what it is. Is this nomenclature specific to GSAP? I can't find any information about it outside of the official documentation. In which context is it being used in reference to GSAP?
  12. Make perfect sense, and helped immensely! Thank you so much! I saw this solution elsewhere, but I didn't quite understand how to make it work! I think I had stuff out of scope because the code from the solution was a bit different. And ternary operations are still a bit confusing as well... I'm so elated right now! I better get crackin'! Big thanks!
  13. Greetings, and salutations! I hope this day finds you well! So, I'm still plodding away with JS and GSAP, and I'm a little stuck in the mud on a simple issue; dealing with an ease in reverse. I've seen a lot of solutions in the forums, but haven't been able to implement one that works (which can only be attributed to the gaps in my current knowledge). Would anyone be kind enough to take a peek at what I'm doing, and perhaps point me in the right direction? Nothing too complicated please (if possible). I'm still experiencing difficulties getting my head around JS and GSAP. Kind regards, X
  14. Greetings and salutations! I was reading over the documentation, and suddenly the thought picking up some sweet GSAP swag occurred to me; maybe a t-shirt or some socks. Do you guys sell merch? Are there any plans to sell merch?