Jump to content
Search Community

OSUblake last won the day on September 16 2023

OSUblake had the most liked content!

OSUblake

Moderators
  • Posts

    9,196
  • Joined

  • Last visited

  • Days Won

    708

Posts posted by OSUblake

  1. Hard to say without seeing the problem.

     

    Might need to use a server, and if the image isn't local, you might get cors issues. Sometimes can be fixed doing this.

     

    If using img element, add crossorigin.

    <img id="img" src="https://assets.codepen.io/106114/dog.png" crossorigin="anonymous">

     

    Or.

    var img = new Image();
    img.crossorigin = "anonymous";
    img.src = "https://assets.codepen.io/106114/dog.png";
    img.onload = init;

     

    • Like 2
  2. Not sure what's supposed to happen based on your code, but your timeline keeps getting longer because you keep adding to it everytime that useEffect function gets called.

     

    If you plan on reusing your timeline, you should create your animations inside another useEffect. 

     

    const tl = useRef(null); // don't create timelines inside a ref declaration
    
    useEffect(() => {
      
      const popContainer = popContainerRef.current;
      const popTitle = popContainer.children[1];
    
      // create timeline here
      tl.current = gsap.timeline({
        paused: true
      })
      .to(popcontainer, { ... });
      
      // return function to kill timeline on dismount
      return () => tl.kill();
    }, []);
    
    useEffect(() => {
    
      // If status is TRUE -> play the timeline
      status && tl.current.play();
    }, [status]);

     

    • Like 3
    • Thanks 1
  3. 1 hour ago, BrownsFanForLife said:

    Couple that with FramerMotion right now. (Which is EVERYWHERE)

     

    This is the first I've heard of Framer Motion. Looks like Framer acquired Popmotion, which has been around for a while, so nothing really new. Just a slightly different syntax.

     

    Writing declarative animation code is fine for simple stuff, but writing complex, sequenced animations in JSX can get messy. Simple examples using react-gsap. I'm not sure this an improvent over imperative code. 🤷‍♂️

    https://bitworking.github.io/react-gsap/src-components-timeline

     

    I don't even know if you can do timelines in Framer Motion, but timelines is definitely where gsap beats out other animation libraries.

     

    But you should use the right tool for the job. Perhaps Framer Motion is a better fit for the type of stuff you do. 

     

    • Like 4
  4. 2 hours ago, ladlon said:

    It seems the material on GSAP doesn't mention Canvas much, and the Canvas material doesn't mention GSAP much... I understand and am comfortable with GSAP... and am 'familiar' with Canvas... the blank area for me is how the two interact.

     

    There isn't going to be a lot of material on canvas because GSAP has no concept of canvas. You have to understand what gsap is. At its core, all gsap does is change numbers on objects. 

     

    Create an object with some properties you want to animate. The names don't matter. Animate that object with gsap. On every animation frame (ticker), redraw the canvas using the updated values from the object. This moves a box back and forth.

     

    image.png.b21858ba9be95da49bb81ccd4aefdadf.png

     

    I'm logging the value out so you can see it change. I'm using that value to control the x position of a box.

     

    See the Pen 339b03f5f02b8b39966c92f253e7fad0 by osublake (@osublake) on CodePen

     

     

    2 hours ago, ladlon said:

    I always thought SVG was a vector format.

     

    It is vector, but you can also use regular images inside.

     

    Think of SVG as being like canvas, but on easy mode.

     

    • Like 3
  5. 11 minutes ago, ladlon said:

    You telling me that the 'DOM' items are tweened, and then put onto Canvas (somehow) is already a huge insight

     

    No. There is no DOM with canvas. Everything is done with objects that you have to design yourself. It's explained in all the stuff I've linked to.

     

    15 minutes ago, ladlon said:

    I liked how Canvas allowed me to build the 'scene' (smaller images on the larger image) on a FIXED size image, so all values could be hard coded/real... and THEN that composite would be responsively scaled.

     

    I think it might be easier if you use SVG for that.

     

    See the Pen 91f6f804c78b8d9d012cc5000f347db5 by osublake (@osublake) on CodePen

     

     

    • Like 2
  6. 1 hour ago, ladlon said:

    I thought I could tween a Canvas item by referring to it by it's name (...I tried classes, variable names, etc)... but no go. 

     

    There are no items in a canvas element. It's just pixels. The best way to understand what is going on is to go through that tutorial, and code every example yourself.

     

    I think the Intro to JS course on Khan Academy is another good place to start. It uses a canvas library, but the concepts are mostly the same for vanilla canvas.

    https://www.khanacademy.org/computing/computer-programming/programming

     

    After that, check out this thread. It's the closest thing to a guide on canvas and gsap as you're going to get. Be sure to click on all the links too.

     

     

    But those sources barely scratch the surface. Canvas can get complicated, especially when dealing with Hi-DPI monitors/retina displays. That's really beyond the scope of this forum.

     

    • Like 2
  7. There is no guide for gsap. It's just knowing how to use canvas.

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

     

    There are no "best/current" methods to animate canvas. Just tween an object, and then draw the changes in a ticker callback. What objects you tween is up to you. 

     

    The only difference between versions will be minor syntax changes.

     

     

    And yes, there are some canvas demos on this forum that don't use gsap. You have to read why they were posted there. Some people just copy and paste canvas code, asking for general help. 

     

     

    • Like 1
  8. I don't know what you saw, but that will always be the proper way to do canvas with gsap.

     

    Those drawing commands are just like the html of a web page. You can't make a web page without html, right? Well you can't do a canvas animation without a bunch of drawing commands.

     

     

    • Like 1
  9. 1 hour ago, ynamite said:

    sometimes the animation simlpy ends or pauses for 1 or more cycle/s. When it does end it just seems to die completely. I'm not sure whether it would resume if I waited long enough, but I don't think it ever would.

     

    If your sTo value is 1.00 or the same as the previous one, then there might not be any animation. Again why using toFixed is a bad idea.

     

    • Like 4
  10. First, gsap has built in random support.

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

     

    Use delayedCall instead of setTimeout. setTimeout is not synced with gsap.

    https://greensock.com/docs/v3/GSAP/gsap.delayedCall()

     

    Subtracting and adding 0 makes no sense.

    var x = Math.random() * (maxOffsetX - 0) + 0;
    
    // Better
    var x = Math.random() * maxOffsetX;

     

    .toFixed() creates a string. Bad for math.

    var sTo = (Math.random() * (scaleTo - 1.00) + 1.00).toFixed(2);

     

    Easy random sign.

    function randomSign() {
      return Math.random() < 0.5 ? 1 : -1;
    }
    
    ...
    
    gsap.to($el, { 
      scale: sTo, 
      x: x * randomSign(), 
      y: y * randomSign(), 
      duration: animTime, 
      ease: "power1.inOut", 
      onComplete: start 
    });

     

    I don't know if this fixes your issues, but it's a start. You should also wait for the image to load before storing its width and height.

     

    See the Pen 17cbaea5c2ba927d860d74bf6540a042 by osublake (@osublake) on CodePen

     

     

    • Like 6
  11.  

    4 minutes ago, Kenner Stross said:

    Regarding canvases: I'm not really familiar with them. Before I spend any time investigating, I just want to make sure that canvas + gsap are compatible; I assume so. If have any canvas links you find useful, please don't hesitate to share.

     

    They definitely work together, but canvas is not easy to learn if you've never done graphics programming before. And animating strokes probably won't be much faster in canvas either. 169 snake animations is going to be taxing with any medium. You're probably better off rethinking your animation.

     

     

    • Like 3
  12. 2 hours ago, littledotchris said:

    As for the CSSPlugin, It was left over by accident, apologies for that... I was previously importing Timeline and appeared that the Timeline uses CSSPlugin under the hood so required it? Fairly sure I found that tip on the forum. (Let's hope I was reading the correct  GSAP version at that time).

     

    Yeah, it was probably from a previous version.

     

    2 hours ago, littledotchris said:

    It looks that way, though I had a GSAP timeline working with the ES module approach, it was only adding in the ScrollTrigger plugin that introduced the issue I am currently seeing. So I am fairly sure ES modules are supported in my environment.

     

    Depending on your setup, it might have been importing umd from "gsap/dist/gsap" even though you had "gsap.

     

    But I don't think you mentioned your setup. If you are doing SSR, then you need to register by checking if the window exists, or inside useEffect or componentDidMount.

     

     

     

    • Like 1
  13. Gatsby's documention.

    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.

     

    So you either have to check.

    if (typeof window !== "undefined") {
      gsap.registerPlugin(...)
    }

     

    Or you have to put registerPlugin stuff in useEffect or componentDidMount.

     

    Also, you might need to do this temp work around.

     

     

     

    • Like 4
  14. Add this to the build section in your nuxt.config.js

     

    build: {
     transpile: [
       "gsap"
     ]
    }

     

    Import like this if you're using spa mode. 

    import { gsap } from 'gsap';
    import { Draggable } from 'gsap/Draggable.js';
    
    gsap.registerPlugin(Draggable);

     

    Import like this if you're using universal mode.

    import { gsap } from "gsap";
    import { Draggable } from "gsap/Draggable";
    
    if (process.client) {
      gsap.registerPlugin(Draggable);
    }

     

    You don't need to import eases. They are strings now.

    https://greensock.com/docs/v3/Eases

     

    • Like 3
×
×
  • Create New...