[Inconsistency in element position after reload.]

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

 

[Inconsistency in element position after reload.]

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

See the Pen eYbodZR?editors=0010 by scottonanski (@scottonanski) on CodePen

[What happen to the docs?]

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

[Noob Question: Affecting Multiple Objects Simultaneously on Single EventListener]

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

See the Pen gOzemGJ by scottonanski (@scottonanski) on CodePen

[Curated Collection of GSAP Examples for Inspiration, with Code?]

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.

See the Pen VwxWwRj by scottonanski (@scottonanski) on CodePen

[CSSPlugin: 3D Transforms]

On 9/17/2022 at 11:33 PM, Rodrigo said:

Hi,

 

Your codepen is using CSS Transitions for showing each face. Since GSAP is not implementing those styles updates, it cannot affect the easing function.

 

Right now you have this:

gsap.to(".cube",{
  ease: "bounce.out"
});

You're telling GSAP, take the element with the class cube, and tween nothing for the default duration (0.5 seconds) and apply a bounce out easing to this tween.

 

This is an extremely old example of something similar, but refactoring the code and make it more dynamic shouldn't be too difficult:

 

 

Hopefully is enough to get you started.

 

Happy Tweening!!!

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;

See the Pen VwxWwRj by scottonanski (@scottonanski) on CodePen

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. 

[GSAP 3: Noob Question...]

2 minutes ago, GreenSock said:

// old
if (cubeParent[0]._gsTransform.rotationX != 0) {
  
// new
if (gsap.getProperty(cubeParent[0], "rotationX") != 0) {

 

I love you.

Stay awesome, Jack!

[GSAP 3: Noob Question...]

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

See the Pen nRxjbm?editors=0010 by rhernando (@rhernando) on CodePen

[CSSPlugin: 3D Transforms]

44 minutes ago, Rodrigo said:

Hi,

 

Your codepen is using CSS Transitions for showing each face. Since GSAP is not implementing those styles updates, it cannot affect the easing function.

 

Right now you have this:

gsap.to(".cube",{
  ease: "bounce.out"
});

You're telling GSAP, take the element with the class cube, and tween nothing for the default duration (0.5 seconds) and apply a bounce out easing to this tween.

 

This is an extremely old example of something similar, but refactoring the code and make it more dynamic shouldn't be too difficult:

 

 

Hopefully is enough to get you started.

 

Happy Tweening!!!

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.

[CSSPlugin: 3D Transforms]

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?

See the Pen VwxpGwz by scottonanski (@scottonanski) on CodePen

[Question about Syntax: Beginner.]

35 minutes ago, Rodrigo said:

Hello,

 

The less than(<) and more than (>) signs are used to set the position of the current animation, relative to the previous animation added to the timeline. Less than means when the previous animation starts and more than after the previous animation ends. In your code all three animations happen at the same time. The first animation at zero(0) seconds, then the second animation is added with <, which means that the animation will start at the same time as the first animation, finally the third animation is added with < (same as the second), so that animation will start when the second animation starts. Since the first animation starts at zero seconds, the second starts at the same time and the third starts at the same time as the second and therefore the first one.

 

Here you can find more details and examples about the position parameter:

Happy Tweening!!!

 

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!

[Question about Syntax: Beginner.]

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

See the Pen mdVPOQV?editors=0110 by GreenSock (@GreenSock) on CodePen

[gsap.effects?]

Ah! Good to know!

Thank you, kind sir.

[gsap.effects?]

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

[Vars?]

9 hours ago, Cassie said:

Also - a little more zoomed out.  'vars' is short for variables. This is true across JS in general.

 

i.e the variables object, an object containing variables that affect the animation. ☺️

 

15 hours ago, Carl said:

For a little walk down memory lane... the vars object goes all the way back to the ActionScript 2 version of GSAP as you can see in the source code here.

 

If one were to dig into the ActionScript 3 documentation you could find note of it here.

 

Being that GreenSock had loads of faithful Flash users and a proven API, much of what was available in the Flash days made it over into the JS version and is still around today although version 3 was a major overhaul which greatly trimmed a lot of fat. 

 

Since the vars term was so grounded in the history of the API it kind of stuck around for awhile. I believe some folks prefer the term config object.

 

However, the documentation for gsap.to() pretty much sums it up 

 

1. vars - an object containing all the properties/values you want to animate, along with any special properties like ease, duration, delay, or onComplete (listed below). 

 

basically the vars object has all the stuff in bold below

 

gsap.to(obj, {x:300, y:200, delay:2, repeat:3, onComplete:done})

 

Hopefully this helps

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! 

[Vars?]

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?

[Beginner Reverse Ease Question (Again..)]

2 hours ago, GreenSock said:

Thanks for providing a minimal demo. 

 

yoyoEase is for changing the ease only in the yoyo phase of a repeat. You don't have a repeat. 

 

It's logically impossible to smoothly change an ease on a regular reverse() because it'd jump if done mid-tween. For example, let's say you're animating x: 0 to x: 100 with an ease: "none". So halfway through it'd be at x: 50. Now let's say you reverse() but want to change the ease to "power2.out"  - well, halfway through that ease may be something like x: 87.425. So you'd suddenly see it JUMP to that spot even though the playhead position didn't change. See the problem? 

 

The reason yoyoEase can work is because it only happens when the animation is at the end/start (no inbetween states)

 

Typically in a scenario like yours, it's much better to just dynamically animate things rather than trying to always reuse the same instance of a single tween/timeline. Like this: 

 

 

 

Does that help? 

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!

[Beginner Reverse Ease Question (Again..)]

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

See the Pen RwMepLO by scottonanski (@scottonanski) on CodePen

[GSAP Merchandise?]

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? 

[ReferenceError: gsap is not defined]

8 minutes ago, OSUblake said:

JavaScript runs in the order it appears, so you can't load GSAP after your animation file.

<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>
<script src="./js/animation.js"></script>

My goodness! D'uh!

It's 3am here. If that's not a clear indication I should go to bed, then I don't know what is. 

 

[ReferenceError: gsap is not defined]

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: 

See the Pen bGYpjoK by scottonanski (@scottonanski) on CodePen

[Trying to get my head around what's happening here;]

1 hour ago, Carl said:

.panel1, .panel2, and .panel3 are used as unique selectors to select the panel that will be animated. 

 

inside the function those selector strings are used to dynamically select child elements

 

function createPanel(panel) {
  var tl = gsap.timeline();
  tl.from(panel + " .bg", {duration: 0.4, scale: 0, ease: "power1.inOut"})

 

when you call createPanel(".panel1") then the first tween in the timeline shown above will use the target selector ".panel1 .bg" which will scale the background element in .panel1

 

when call createPanel(".panel2") then the next timeline animates ".panel2 .bg" and so on. 

 

This is how all 3 panels get the same animation.

 

Make sense?

 

 

 

 

Ah! Yes! Make sense now. Thank you.

[Trying to get my head around what's happening here;]

13 minutes ago, Carl said:

HI.

 

This is what we refer to as "functions that create and return timelines". You'll notice each panel has the same animation.

The createPanel() function takes in a panel class as a parameter. The function then creates a timeline that animates a bunch of elements in that panel. That timeline is then inserted into the master timeline.

 

Another way to put it is "the master timeline is adding the animation that is created and returned by the createPanel() function when we call it and pass in a particular panel."

 

This is a very powerful technique when you want to do similar things to multiple items. 

 

If you're interested I have a complete, multi-part video tutorial teaching how to build something like this step-by-step from the ground up in my course GSAP 3 Beyond the Basics.

 

 

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?

[Trying to get my head around what's happening here;]

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. 

See the Pen yLNqOVd by GreenSock (@GreenSock) on CodePen

[The "vars" object.]

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.