[GSAP browser error message]

10 minutes ago, Shaun Gorneau said:

There are quite a few ways to go about this ... ultimately what you want to do is not run your GSAP code on pages where it's not called for.

 

Sorry, WordPress n00b here. Isn't there a way to not load the file to begin with?

 

[TextPlugin and animations don't work on reload/bugg]

Your mouse image isn't in the DOM when your gsap code runs. You need to put your animation code inside useEffect functions and use refs instead of query strings.

 

Tutorial using ScrollTrigger, but the concepts are still the same.

https://edidiongasikpo.com/using-gsap-scrolltrigger-plugin-in-react

 

[GSAP browser error message]

Don't load your animation code on pages that don't use it.

 

[Tween targets inside shadowRoot]

A way to do that more like how Vue handles refs. If a ref attribute appears more than once, it gets added to an array.

 

Ex HTML:

<div ref="container">
  <div ref="box"></div>
  <div ref="box"></div>
  <div ref="box"></div>
</div>

 

BaseElement:

class BaseElement extends HTMLElement {
  
  select(selector) {
    return this.shadowRoot.querySelectorAll(selector);
  }  

  createRefs() {
    const $ = this.$ = {};
    for (const node of this.shadowRoot.querySelectorAll("[ref]")) {
      const id = node.getAttribute("ref");
      
      if (!$[id]) {
        $[id] = node;
      } else {
        if (Array.isArray($[id])) {
          $[id].push(node);
        } else {
          const list = [];
          list.push($[id], node);
          $[id] = list;
        }
      }
    }
  }
}

 

Ex JS:

class MyComponenet extends BaseElement {

  connectedCallback() {
    this.createRefs();
    
    gsap.to(this.$.container, {
      x: 100
    });
    
    gsap.to(this.$.box, {
      scale: 0.5
    });
  }
}

 

 

[Tween targets inside shadowRoot]

What do you think the API should look like? @GreenSock I think something like this would also be a nice addition, especially for people who use React, Vue, Angular. That way they wouldn't have to create a bunch of refs.

 

But here is how I've handled that in web components. I extend a "BaseElement" class with some extra methods on it. If you're using a library like LitElement, you could do the same thing.

 

class BaseElement extends HTMLElement {
  
  select(selector) {
    return this.shadowRoot.querySelectorAll(selector);
  }  

  createIdCache() {
    this.$ = {};
    for (const node of this.shadowRoot.querySelectorAll("[id]")) {
      this.$[node.id] = node;
    }
  }
}

 

So you would call createIdCache after the DOM is available, like in a connected callback. That will make any elements with an id available on the $ object. Or you could just use the select method.

 

Ex HTML:

<div id="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

 

Ex JS:

class MyComponenet extends BaseElement {

  connectedCallback() {
    this.createIdCache();
    
    gsap.to(this.$.container, {
      x: 100
    });
    
    gsap.to(this.select(".box"), {
      scale: 0.5
    });
  }
}

 

 

[How to make laminar background colour animations]

Best place to start is by learning PixiJS, and following some of their examples. Once you get it built, animating the filter is super easy.

https://pixijs.io/examples/#/filters-basic/displacement-map-flag.js

 

Examples repo:
https://github.com/pixijs/examples

 

Docs:

http://pixijs.download/release/docs/index.html

 

[Possible to play part of a video on button press with GSAP?]

20 minutes ago, JimmyK said:

Sometimes it pauses the video randomly

 

Then maybe it's buffering. The canplaythrough event is just an estimate. You might need to download the video. Google how to create a BLOB and use that as a video source.

 

But video is super complicated, and well beyond the scope of this forum. Here's a good place to start learning about all the different properties and events available.

https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement

 

 

[Animation with ScrollTrigger breaks when activating invalidateOnRefresh]

You should probably be doing .fromTo() animations. Let's say you animate the opacity .from() 0. If that animation gets invalidated when the opacity value is at 0.5, then the new animation will only animate the opacity to 0.5 instead of 1. .from() will always animate to the whatever the value is at that point in time.

[Horizontal Scroll with Draggable, syncing the two.]

Here's a good example to learn from.

See the Pen 896549f0a83297debd9111fe9b205a97 by GreenSock (@GreenSock) on CodePen

 

[Possible to play part of a video on button press with GSAP?]

You really don't need gsap for that. I would just use some delayedCalls.

 

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

 

 

[Performance diff between updating value via timeline vs via onUpdate]

The first option should be faster as it has less function calls and object read/writes.

 

Not saying the are no use cases for the second option, but performance isn't one of them.

 

 

 

[Wave animation with gsap]

10 hours ago, Rodrigo said:

Although in my list you're our Canvas/PIXI/WebGL wizard and also on other categories as well

 

I originally made that ripple/wave animation in Pixi, but then I stumbled across a site that showed how SVG filters work basically the same, so it was pretty easy to convert.

 

http://srufaculty.sru.edu/david.dailey/svg/SVGOpen2010/Filters2.htm

http://srufaculty.sru.edu/david.dailey/svg/newstuff/Newlist.htm

http://srufaculty.sru.edu/david.dailey/svg/texture/texturepage.htm

 

 

[Wave animation with gsap]

8 hours ago, Rodrigo said:

I honestly don't know how to achieve that with SVG, perhaps our svg wizards @Cassie and @PointC could share some wisdom on the subject.

 

How come I didn't make the list? I've been making SVG waves since 2015.

 

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

 

 

 

 

[I just joined the GSAP community and have some questions about using it with react!]

2 hours ago, Alixsep said:

i will be happy if you explain what is going on with refs in array and gsap.

 

What are you trying to figure out? If you want to animate an list of elements, gsap needs an array or a nodelist.

gsap.to([element1, element2, element3], {
  x: 100
});

 

Push will just keep adding to that list, so you end up with something like this.

gsap.to([element1, element2, element3, element1, element2, element3,element1, element2, element3], {
  x: 100
});

 

2 hours ago, Alixsep said:

Uhh, as i asked ... why is there so many useEffects in that tutorial?????? none of them has a dependency for useEffect :( 

 

You can ask the author. It's not necessary. Maybe they did it for clarity. 🤷‍♂️

 

 

[matchMedia without standalone]

10 minutes ago, ferriss said:

Regards to the .matchMedia(), are you saying I can do it like this:

 

Yep. Did you look at the examples in the docs? That's pretty much the format they all use.

https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.matchMedia()

 

12 minutes ago, ferriss said:

or the other question was, is there a property to use within the animation.

 

No that's not possible, but like I said earlier, you can put any code you want inside the matchMedia functions.

 

[matchMedia without standalone]

Sorry, I still don't quite understand what you're asking. You can put whatever code you want into the matchMedia functions. Can you please put what you're trying to achieve into a demo?

 

49 minutes ago, ferriss said:

Yes, I'm aware of JS media queries, but I then didn't want to add in resize debouce as I was hoping GSAP had this in-build so you can resize the browser and it'll degrade without refreshing.

 

Media query events don't fire on resize, they fire on media query change events, so trying to debounce them is pointless.

 

[matchMedia without standalone]

What do you mean "standalone"? You can either use ScrollTrigger's .matchMedia() or write your own media queries.

[GSAP with Vue. EnterBack not working properly with multiple scrollTriggers on timelines set up]

12 hours ago, didkumi said:

Also, the project is potentially going to grow in size and I was wondering if the set up I currently have is the right way to go...

 

I would say that you should always use refs instead of selector strings, otherwise you'll quickly run into conflicts with other components that have same ids/class names.

 

12 hours ago, didkumi said:

I plan to use d3 functions at some point as well.. 

 

Which ones? You might be surprised how much gsap can do.

https://greensock.com/docs/v3/GSAP/UtilityMethods

 

const posX = d3.scaleLinear()
        .domain([0, 100])
        .range([0, this.viewport.clientWidth]);

// same as this
const posX = gsap.utils.mapRange(0, 100, 0, this.viewport.clientWidth);

 

Or just using the plain DOM/SVG APIs.

d3.select(chart).attr(
      "viewBox",
      `0 0 ${chart.clientWidth} ${chart.clientHeight}`
    );

// same as this...
chart.setAttribute(`0 0 ${chart.clientWidth} ${chart.clientHeight}`);

 

[SVG elements default origin]

That's pretty new. I've known about it, but I don't think I've ever used it....

transform-box: fill-box;

 

Back in the day you had to put in the x and y coordinates for the origin to rotate around.

<rect x="145" y="100" width="30" height="30" transform="rotate(45 145 100)" />

 

 

[AirPods image sequence animation using ScrollTrigger]

You're server just seems really really slow. The canplaythrough event is just an estimate of it can play all the way through. You might have to fetch the video, kind of like someone did in this demo. That's where I stole that video clip from.

 

See the Pen 9e810322d70c306de2d18237d0cb2d78 by shshaw (@shshaw) on CodePen

 

 

[SVG elements default origin]

@GreenSock would have to answer why GSAP defaults to the top-left of the element instead of the center, but I'm guessing it's because the smooth origin feature came later. If you've worked with complicated transforms before, like with canvas, you will know that changing the transform origin can cause the element position to change.

 

[SVG elements default origin]

It's always been like that for SVG elements. Why? Because GSAP is forward thinking 😉

 

And this... transform origin was inconsistent.

https://css-tricks.com/svg-animation-on-css-transforms/

 

If you want it to be the center of the element...

gsap.set("rect", {
  transformOrigin: "50% 50%"
});

 

If you want it to use the SVG origin...

gsap.set("rect", {
  svgOrigin: "100 75"
});

 

[AirPods image sequence animation using ScrollTrigger]

GSAP will still use rAF, but the smoothness is ultimately going to be determined by how many frames there are. The same goes for canvas. The more images you include, the smoother it might be.

 

Just a simple demo using video.

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

 

[AirPods image sequence animation using ScrollTrigger]

Well, the only way to make it download faster is to have a faster internet connection. The best thing to do is to make sure your server is allowing those images to be cached so the user doesn't have redownload them again on subsequent page visits.

 

Another option would be to use video instead of images. You should be able to set the playhead of the video using ScrollTrigger.

[ScrollTrigger calculates wrong pin-spacer height when user agent type is mobile]

Is there a problem on mobile? That tool is just an emulator and shouldn't be used for actual testing.