SpaceMoney-01011000

Okay, I figured it out. Had to adjust some calculations.

Greeting and salutations! I'm in the process of building out a pre-loader and I have this little quirk that's driving me bananas. If you look at the pen, the overall feature is fairly self-explanatory; it's a pre-loader that transitions to a second button face that encapsulates a "continue" button. Now, then - with that said, on the mouseover event, there's an SVG arrow that animates to the right side of its parent element; which is working as expected. However, I've noticed that on occasion, the SVG arrow (or rather its container - a span) doesn't position it self in the same spot 100%. I've been pulling my hair out trying to understand why, and I'm about to down a fifth of Jack Daniels. I was wondering if some of you wonderful people would be gracious to my beggarly self and perhaps take a peek at it? I've included two images to illustrate the issue to keep you from having to refresh the page to catch the error. Kind regards, X. Right! WRONG!!!

Where can I find the old docs for 3.x? I find this new layout very distracting.

As per the title, I'm trying to affect animations on two objects per one EventListener(). It's kind of working, but not as intended. The effect I'm looking for is to have each of the digit labels fire independently in correlation to their respective button. At this moment, they are firing in unison, which is not what I want. I was wondering if one of you seasoned pros would be able to tell me what I'm doing wrong. Thanks in advance. Kind regards, X

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

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.

I love you. Stay awesome, Jack!

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

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.

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?

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!

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

Ah! Good to know! Thank you, kind sir.

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...

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!

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?

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!

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

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?

Not sure exactly why this happening, I mean it's not rocket surgery... One local script, and two sources to the CDN; one for GSAP core, and another for ScrollTrigger. <script src="./js/animation.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/ScrollTrigger.min.js"></script> And a basic script to test things out; gsap.registerPlugin(ScrollTrigger); gsap.to(".test-thingy", { scrollTrigger: { trigger: ".test-thingy", toggleActions: "restart none none none" }, x: 400, rotate: 90, duration: 0.5 }); This is the message I have getting bounced back to me in the console; animation.js:3 Uncaught ReferenceError: gsap is not defined Works fine in a pen. Am I missing something? Or is my brain in neutral? Thanks, guys. codepen: https://codepen.io/scottonanski/pen/bGYpjoK

Ah! Yes! Make sense now. Thank you.

I understand what it's doing overall, but I'm still not sure what it's doing specifically with the.panel1,.panel2 and.panel3 classes as there's no discernable styling associated with them - they're just empty classes in the markup. I mean, if there's no color, no dimension or anything else; what's happening to them? Why are they there?

Greetings and salutations! I'm looking over nested timelines using the aforementioned Codepen example, and I'm trying to figure out what's going on in the code because I'm not sure what's being affected or why; var master = gsap.timeline({repeat: -1}); master.add(createPanel(".panel1")) .add(createPanel(".panel2")) .add(createPanel(".panel3")); I kind of get the gist of what's happening insofar as the timeline function is being passed off to the 'master' variable. What I'm not too sure of is why the classes of .panel1, .panel2, or .panel3 are being .added in there, or what effect the code is having on them - as they are empty classes. Anyone feel like helping me understand this? I'm just getting familiar with GSAP and JS in general, so I'm a little perplexed as to how to interpret what I'm reading. Kind regards, SpaceMonkey-X.

Awesome! Thanks! I kind of picked up on that a bit from the contextual clues, but I wasn't completely sure of it. Thank you for taking the time to answer such a basic question. I'm learning JS an GSAP simultaneously, so I get a little befuddled when trying to wrap my head around what's being taught in the documentation. Nevertheless, I'm having a blast with GSAP. This is the perfect tool for molding the potential of online content. I'm finding it very inspirational.