[Ideal vue.js setup for playing and reversing timelines]

I would put the timeline on the instance using this.

 

export const homeTweens = {
  mounted() {
    
    this.introTl = gsap.timeline()    
      .from(
        this.$refs.separador1,
        {
          duration: 0.8,
          xPercent: -100,
        }
      )
      .from(
        this.$refs.mouseContainer,
        {
          duration: 0.9,
          yPercent: 100,
          autoAlpha: 0,
        },
        "<"
      )
      .from(
        this.$refs.nombre,
        {
          duration: 0.5,
          yPercent: 10,
          autoAlpha: 0,
        },
        "<"
      );
  },
  beforeRouteLeave(to, from, next) {
    this.introTl.reverse().eventCallback("onReverseComplete", function() {
      this.introTl.kill();
      this.introTl = null;
      next();
    });
  },
};

 

[draggable within a draggable]

Oh, well the border is still a slight 2px problem.

 

I don't have time to go through all your code right now, but I think you have a problem somewhere. Like why is every scene being looped through, and why is append being called every time?

 

 

 

[draggable within a draggable]

There's obviously some logic/calculation problems in your code because the card doesn't always snap to same position inside the draw box. It should behave like this.

 

See the Pen 94f3c5032960e8b95a527b70cfd22afa by osublake (@osublake) on CodePen

 

 

The easiest thing to do is to make sure everything is absolutely positioned at 0, 0. Stuff like border width can also throw off getBoundingClientRect. If you need a border, then do it in another layer.

 

[Change direction of timeline based on mouse position]

That wrap function isn't needed anymore. gsap has one now.

https://greensock.com/docs/v3/GSAP/UtilityMethods/wrap()

 

[Ideal vue.js setup for playing and reversing timelines]

Hard to say without seeing your code. Are you adding animations to the data object?

 

I normally put animations on the instance itself. The data object is for reactive stuff. Adding animations to it creates more overhead.

[How To registerPlugin in React or Gatsby ( gsap v3.3.4 )]

Read gatsby's docs.

https://www.gatsbyjs.org/docs/debugging-html-builds/

 

Quote

Some of your code references “browser globals” like window or document. If this is your problem you should see an error above like “window is not defined”. To fix this, find the offending code and either a) check before calling the code if window is defined so the code doesn’t run while Gatsby is building (see code sample below) or b) if the code is in the render function of a React.js component, move that code into a componentDidMount lifecycle or into a useEffect hook, which ensures the code doesn’t run unless it’s in the browser.

 

You need to check if window is defined, or move it into componentDidMount or useEffect hook.

 

import { gsap } from "gsap"
import { ScrollTrigger } from "gsap/ScrollTrigger";
import { CSSRulePlugin } from "gsap/CSSRulePlugin";

if (typeof window !== "undefined") {
  gsap.registerPlugin(ScrollTrigger, CSSRulePlugin); 
}

 

[Solitaire implementation build on GSAP]

Nice! World of solitaire also uses gsap.

https://worldofsolitaire.com/

 

 

[setting hyphenated SVG attributes]

3 hours ago, PointC said:

I guess I was just wondering if there would be some 'under the hood' magic from GSAP to allow the use of camelCase and it would make the conversion for us.

 

And, I don't think gsap does any conversion between the different cases because it's not necessary. 

 

CSS can be set using camelCase.

element.style.backgroundColor = "blue";

 

Or kebab case.

element.style.setProperty("background-color", "blue");

 

But that still doesn't change the fact that attributes have to be an exact match.

 

[setting hyphenated SVG attributes]

9 minutes ago, OSUblake said:

I'm pretty sure that all the non-presentation attributes for SVG are camel cased e.g. viewBox.

 

The reason being that those attributes are also properties on the element. 

var svg = document.querySelector("#svg");

console.log(svg.viewBox.baseVal);

 

The only exception I know of is that d isn't a property of a path element because it was supposed to get reworked for SVG 2, but that's kind of been stalled. 🤷‍♂️

 

[setting hyphenated SVG attributes]

32 minutes ago, PointC said:

If you create a text element and then use GSAP to set x, y and the text-anchor, the x and y don't need to be strings.

 

Technically the names end up as strings, you just don't have to put quotes around the name if its a valid identifier or number.

 

Quote

Property names are string or Symbol. Any other value, including a number, is coerced to a string. This outputs 'value', since 1 is coerced into '1'.

 

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Property_accessors#Property_names

 

32 minutes ago, PointC said:

It works fine if they are though. I don't know if it'd be better to put all the attributes in quotes for consistency. Maybe that would make more sense to someone new? I dunno.

 

Hm... I can see how that might be confusing for a tutorial. I'd go with showing CSS whenever possible. I'm pretty sure that all the non-presentation attributes for SVG are camel cased e.g. viewBox. Please correct me if I'm wrong. I didn't go through all of them. I'm just going off of memory.

 

I know x and y are a little different for attributes, but I probably wouldn't bring it up. Just make them use gsap's x and y transforms.

 

 

[setting hyphenated SVG attributes]

Just now, OSUblake said:

In cool browsers

 

Be sure to try out the new Edge browser. It's my favorite on Mac and Windows.

 

 

[setting hyphenated SVG attributes]

In cool browsers, you can set stuff like cx, cy, r, etc with CSS. 😲

 

#circle {
  r: 10;
  cx: 200;
  cy: 200;
}

 

See the Pen e43d9e6812c484ff6e57c9624ddc91c2 by osublake (@osublake) on CodePen

 

 

[setting hyphenated SVG attributes]

You must use attributes exactly as they appear on the element. 

 

4 hours ago, PointC said:

It seems I can use camelCase outside of the attr:{} wrapper and it will work, but that results in style="text-anchor: middle;".

 

That's setting CSS, and CSS properties can be camel cased. All presentation attributes can be set with CSS, and CSS will override any attributes.

https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/Presentation

 

 

gsap.set("#c", {
  attr: {
    "text-anchor": "start"
  },
  textAnchor: "middle" // WINS!
});

 

[random value is a string]

8 minutes ago, OSUblake said:

It's not a string on the first set.

 

See the Pen 8217fce92f4098e3a5e552fcdd281a26 by osublake (@osublake) on CodePen

 

 

[random value is a string]

It's not a string on the first set.

 

If it's supposed to be a string, then it should be documented as such, but I'm not sure I see where the string is even documented. Shouldn't it be here?

https://greensock.com/docs/v3/GSAP/UtilityMethods/random()

 

[random value is a string]

When using "random()", the value ends up as a string. I would expect it's type to stay the same. This can cause problems with code that is expecting the value to be a number.

 

 

 

 

See the Pen 58964daaa90343ed392c30ed9bffe9dc by osublake (@osublake) on CodePen

[about using #id or .className to animate etc..]

Good article on why you should use refs, The Reusability Problem. It uses React, but the same issue will happen in other component libraries like Vue.

https://www.javascriptstuff.com/use-refs-not-ids/

 

 

[import CustomBounce,need help!]

There is no gsap file. You should import the index.js file.

//import { gsap } from "./plug/gsap.js";
import { gsap } from "./plug/index.js";

 

Don't use TweenMax or TimelineMax.

//const tl = new gsap.TweenMax();
const tl = gsap.timeline();

 

 

 

[VUE & Gsap - how do i put my already working timeline tween on a separated file?]

And you don't need to import the css plugin. 

https://greensock.com/docs/v3/Installation?checked=core

 

[VUE & Gsap - how do i put my already working timeline tween on a separated file?]

You can use a mixin.

https://vuejs.org/v2/guide/mixins.html

[Anim not randomizing when put on canvas]

There are no shapes in this demo. It's all images.

 

See the Pen c70ff0dcd68fc1581dbf8b335fb60c3b by osublake (@osublake) on CodePen

 

If you have more than 1 sprite, you should put them in an array just like the demo above. 

 

function render() {
  
  context.clearRect(0, 0, canvas.width, canvas.height);
  
  for (var i; i < sprites.length; i++) {
  
    var sprite = sprites[i];
    
    context.save();
    context.translate(+sprite.x + sprite.offsetX, +sprite.y + sprite.offsetY);
    context.rotate(sprite.rotation * toRad);
    context.drawImage(sprite.texture, -sprite.offsetX, -sprite.offsetY);
    context.restore(); 
  }  
}

 

[Anim not randomizing when put on canvas]

Just now, ladlon said:

fillRectangle(), rather than an image.

 

Follow the code. translate is used to move the x and y.

[Anim not randomizing when put on canvas]

I've provided numerous demos, on how to do that. This is basically copypasta.

 

See the Pen 770020227bacc02ea19bcbb796b25ef9 by osublake (@osublake) on CodePen

 

@GreenSock is random supposed to be returning strings? That messed me up for a second.

 

 

[Anim not randomizing when put on canvas]

1 hour ago, ladlon said:

Zack seemed to indicate that GSAP can't directly rotate things... which is why I was then trying to go the non-GSAP rotation route.

 

He meant that gsap won't do the draw calls.

 

1 hour ago, ladlon said:

Ya, I noticed the rotation properties in your previous examples.  Weird, why didn't those show up in any of the vids I saw?  (See, that's what I'm talking about when I say I was concerned about the validity of these YouTube tutorial vids I find!)

 

What videos? If someone isn't animating rotation, there's no point in putting in on the object. Or perhaps they named it something different. 

 

1 hour ago, ladlon said:

I'm still confused about whether or not to use the whole 'wait for the page to fully load' routine.  You had it in your previous sample to me (Dog sliding), as well as your current one, yet (unless I'm understanding him wrong) Zack seems to think they are unnecessary.  Look at his posts on this thread.  So, ya, I'm a bit confused... and going in circles sometimes.

 

If you're using images, then you need to wait for the images to load. If you're just drawing shapes, then no, you really don't need to wait. Look at how I'm using window.addEventListener in the demo I posted. I think that is the easiest way.

 

1 hour ago, ladlon said:

I'll study up on the whole Canvas rotation thing some more... although now I'm confused about whether that 'move the canvas to line up the origin to the target 'object' origin, rotate the whole canvas, drop the object, rotate the canvas back and move the canvas back' hack/routine is still needed.

 

It's not a hack.

https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Transformations

 

The browser has do the exact same thing when you rotate an html element. It happens automagically, so you don't notice it, but it's the exact same calculations.

 

Just think of canvas a piece of graph paper, but you can only draw stuff at 0, 0, so you need to move (transform) the paper around. 

 

 

 

 

[Anim not randomizing when put on canvas]

6 minutes ago, ladlon said:

I actually tried it (seemingly the exact same way you did), and it didnt' seem to work. 

 

You have to make sure you use ctx.save() and ctx.restore() when doing transforms, or it will keep adding on the last transform, messing everything up.