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. 19 minutes ago, Black Ducas said:

    In the package.json now I have "gsap": "file:gsap-bonus.tgz",

    It means that now I can't update via npm update? Instead I have to re-download the zip and re-launch npm install?

     

    Leave the gsap-bonus.tgz file in your project so you can do npm update for other packages. If you need to update gsap, you will need to download the new version from your gsap account, and repeat the process.

     

    19 minutes ago, Black Ducas said:

    Also, once installed can I delete the zip from the project folder?

     

    You never needed the zip in your project. The gsap-bonus.tgz file is the only file you need. A .tgz is a gzipped file. That's what every package you download from npm is.

     

    • Like 3
  2. 2 hours ago, nikolev said:

    I was wondering if I can leverage the MotionPathHelper to move those around and somehow save the new values?

     

    Sure. When you click on the path, you can drag it around. Once your path is in position, right-click on the element, select inspect, and look for the transform attribute. It will look something like this.

    <path transform="matrix(1 0 0 1 17.5 -27.5)"></path>

     

    You just need to add that transform attribute to your path element.

     

    • Like 5
  3. 1 hour ago, OSUblake said:

    In general, I would say Canvas2D is probably the fastest way to render vector graphics on the web, but it does have limits.

     

    In some cases, vector rendering in canvas can be improved by using Path2D. It caches paths, reducing the number of draw calls you need to make. Still not as fast as using drawImage, but it can definitely speed up vectoring rendering for shapes that don't change a lot. It can be polyfilled for older browser, and has some limitations in legacy Edge.

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

     

     

    • Like 4
  4. Hi @Saurabh Nandwana

     

    That's quite an ambitious task!

     

    Performant vector rendering is a problem that people have been working on for years. 

     

    Have you checked out bodymovin/lottie? It's a vector player, but it's not a perfect solution, nor is it always performant. 

    https://github.com/airbnb/lottie-web

    https://codepen.io/collection/nVYWZR

     

    There's even a nice web component for it so you can use it just like a <video> element.

     

    See the Pen JLrbYB by fernandocomet (@fernandocomet) on CodePen

     

     

    8 hours ago, Saurabh Nandwana said:

    Canvas. - Inability to perform well when drawing dynamic content over static content. Some sort of layering where shapes which doesn't change/move over a given timeframe are drawn on a canvas-layer and those dynamic shapes are drawn-erased-redrawn on higher (z-index) layers.

     

    Having too many canvas layers can slow stuff down. I remember the developer of bodymovin/lottie saying that it uses a dirty rectangle algorithm to limit redrawing to parts of the screen that have changed instead of the entire scene.

     

    In general, I would say Canvas2D is probably the fastest way to render vector graphics on the web, but it does have limits. Uncheck the Use Bitmap checkbox, and you should see the performance drop as it switches to vector rendering.

     

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

     

    8 hours ago, Saurabh Nandwana said:

    GSAP - Have explored morphing shapes. To be explored more.

     

    Morphing works well for some stuff, but it's probably not the best tool for a Simpsons cartoon as its hard to control the movement like you can with joints and bones.

     

    8 hours ago, Saurabh Nandwana said:

    WebGL - Mostly useful for 3d animations. We are still on 2d animations so probably not now. Since canvas 2d-context has fallback on this.

     

    WebGL is still a nice option for 2d, but it won't automatically fallback to canvas as WebGL uses a completely different API. However, WebGL support is very good.

     

    8 hours ago, Saurabh Nandwana said:

    PixiJS - Doesn't have good support for SVG or Graphics in general. The latest version v5 uses WebGL2 which itself is not yet supported widely.

     

    I'm pretty sure it will fallback to WebGL 1, but PixiJS was never really designed to really handle complex vector graphics. It's optimized for raster graphics. For SVG, it converts them into bitmaps, so they are static. To change a path, you would need to modify the source SVG and then get Pixi to reload it, which is a slow process. For stuff like that, it's usually faster use a Canvas2D as a texture as it's much faster to update.

     

    • Like 8
  5. 5 minutes ago, OSUblake said:

    I would do it by hand. Jack's demo is using the MotionPathHelper.

    https://greensock.com/docs/v3/Plugins/MotionPathHelper

     

    So add points using that helper (alt + click), copy the path data, and then put the path data inside the d="" quotes.

    <path id="red-piece" fill="#ff39aa" d="" />

     

    Now move the those points to the melted position, copy the path data, and insert it in thed="" quotes.

    <path id="red-piece-melted" fill="#ff39aa" d="" />

     

    • Like 6
  6. First, just importgsap. There is no need to import TweenMax or eases.

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

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

     

    If you can't get it working in CodePen, use stackblitz or codesandbox.

     

    4 hours ago, AnthonyJRay said:

    Nevermind, I added seperate Refs and animations for each circle. I guess now my question would be, is there a way to do what I was originally trying to do? Animating them all within the same Ref or Tween?

     

    You need to put them in an array. Something like this, but I didn't test it.

     

    import React, {useRef, useEffect} from 'react';
    import styled from 'styled-components';
    
    import {gsap} from 'gsap';
    
    const Header = styled.h1`
        text-align: center;
        color: palevioletred;
    `;
    
    const Circle = styled.div`
        position: relative;
        // top: 50%;
        // left: 50%;
        height: 250px;
        width: 250px;
        border: 1px solid palevioletred;
        border-radius: 50%;
    `;
    
    const CircleContainer = styled.div`
        background-color: #777;
    `;
    
    const CircleOne = styled(Circle) `
        z-index: 500;
        position: absolute;
        top: 50%;
        left: 50%;
    `;
    const CircleTwo = styled(Circle)`
        z-index: 600;
        position: absolute;
        top: 50%;
        left: 50%;
    `;
    const CircleThree = styled(Circle)`
        z-index: 700;
        position: absolute;
        top: 50%;
        left: 50%;
    `;
    const CircleFour = styled(Circle)`
        z-index: 800;
        position: absolute;
        top: 50%;
        left: 50%;
    `;
    
    
    
    function App() {
      let circle1 = useRef();
      let circle2 = useRef();
      let circle3 = useRef();
      let circle4 = useRef();
        let textItem = useRef(null);
    
        useEffect(() => {
          
          const circles = [
            circle1.current,
            circle2.current,
            circle3.current,
            circle4.current
          ];
          
            gsap.to(
                circles,
                {
                  duration: 1.5,
                    opacity: 1,
                    transformOrigin: 'center',
                    rotate: 360,
                    y: 50,
                    ease: "boumce.out"
                }
            );
            gsap.to(
                textItem.current,
                {
                  duration: 1.5,
                    opacity: 1,
                    rotate: 360,
                    x: 100,
                    ease: "bounce.out"
                }
            )
        }, []);
    
      return (
        <div className="App">
            <Header ref={textItem}>GSAP Animations</Header>
            <CircleContainer>
                <CircleOne ref={circle1}></CircleOne>
                <CircleTwo ref={circle2}></CircleTwo>
                <CircleThree ref={circle3}></CircleThree>
                <CircleFour ref={circle4}></CircleFour>
            </CircleContainer>
        </div>
      );
    }
    
    export default App;

     

     

    • Like 2
  7. 2 hours ago, jSwtch said:

    I had started a similar thread here (https://www.html5gamedevs.com/topic/45085-gsap-v3-pixijs-v5-pixiplugin-w-graphics-issue/) for a different reason. I was wondering if someone here could comment on this question though. @OSUblake

     

    I would second everything Ivan said. It's really hard to estimate how well each medium (WebGL, canvas2D, SVG) will perform for animating graphics like that. I'm pretty sure canvas2d will be faster than SVG, but it's not the easiest thing to work with. Will Pixi be faster than canvas2D for an animation like that? I honestly don't know, but it will be much easier to create in Pixi.

     

     

    • Like 4
  8. Just now, krissss said:

    Well, after uninstalling it, a lot of errors occured.

     

    Hm. Maybe try restarting your editor. And maybe try deleting your node_modules folder and doing a clean install.

     

    If that doesn't help, make a simple repo showing the problem. It's very hard to troubleshoot local build problems.

     

     

    • Like 2
  9. 8 minutes ago, krissss said:

    TS2614: Module '"gsap"' has no exported member 'gsap'. Did you mean to use 'import gsap from "gsap"' instead?

     

    Like Jack said, make sure you uninstall @types/gsap.

     

    11 minutes ago, krissss said:

    Also to mark, that i have other modules in which im importing TweenMax,TweenLite and etc..

     

    You don't need to import TweenLite/TweenMax, TimelineLite/TimelineMax, or any eases. Everything can now be done with the gsap object.

     

    Also, installation docs.

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

     

     

    • Like 1
    • Thanks 1
  10. And after reading your reply, I guess you're trying to do something similar to this? One problem with using the modifiers plugin for points is that calculations have to be done in separate x and y functions. I think it would be easier to do all the calculations in an onUpdate or ticker for any elements that have moved.

     

    image.png.bc6f55ece5f72cdb232ec71eaa8e723b.png

     

     

     

    • Like 1
  11. 34 minutes ago, pragdave said:

    Frankly, I found your response to be dismissive and somewhat off-putting.

     

    That wasn't my intent. I was genuinely trying to help you.

     

    34 minutes ago, pragdave said:

    You took the time to create a couple of pretty examples, but they had nothing to do with my problem:

     

    Those demos show how you can speed up drawing lines using SVGPoints as it might require less updating i.e. setting attributes.

     

    34 minutes ago, pragdave said:

    performing a calculation the minimum number of times when something moves.

     

    That was not clear to me in your original post. You just showed that spring demo. The way I set those up is with the modifiers plugin is to run infinitely. The only reason I did that was to demonstrate how the modifiers plugin works. Normally I would have just used a ticker to animate something like that.

     

     

    • Like 5
  12. Why are you trying to optimize it? JavaScript is fast. SVG is slow.

     

    1 hour ago, pragdave said:

    However, if both shapes are moving, this means I redraw the line four times for each update cycle.

     

    That's really not how it works. The line redraws at the end of all your updates. That said, I like using SVGPoints with polylines/polylines instead of updating a <line>. Move your mouse around.

     

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

     

    Points can be animated too.

     

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

     

    1 hour ago, pragdave said:

    So far my best guess is to use the modifiers to build a list of the new coordinates and then have the onUpdate callback draw the line based on them. But this seems kinda hacky. 

     

    Doesn't sound hacky, but why not just updated everything inside a single onUpdate? Not sure why are you using the modifiers plugin based on your description? A demo might help to understand your problem better.

     

     

    • Like 4
  13. 32 minutes ago, ZachSaucier said:

    :foo is a pseudo-class. ::foo is a pseudo-element. The only reason why you should use :foo for psudeo-elements is if you need IE 8 support :D 

     

    Ha... noted. I def don't care about any version IE.

     

    33 minutes ago, ZachSaucier said:

    More often than you might think. Nav-related animations in particular.

     

    Do you have a demo of that? I'm genuinely interested in seeing the difference.

     

  14. 18 minutes ago, ropsth said:

    Hey @OSUblake, here's someone who sincerely appreciates the efforts you make! Especially in this thread haha :)

     

    Pro tip: I'll answer anyone's question if they make a bare minimal effort to try and understand my code. Any attempt... that's all I ask, but I can tell you've already done that! 😉

     

    20 minutes ago, ropsth said:

    The only part I wasn't able to get to were inside the `Connector.updatePath()` method. In there you use `inputHandle._gsTransform`, however the `_gsTransform` property doesn't seem to be present on the `inputHandle` and `outputHandle` elements...

     

    Yes, that changed with v3....

     

    4 minutes ago, ropsth said:

    I was able to make it work using the `_gsap` property in the `inputHandle`. That has a `x` and `y` property. 

     

    You should never use an underscore to access something in v3 of gsap. There is a proper way to access everything now. Check out the getProperty() function.

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

     

    And check out the Reusable getter function at the bottom. It will cache the target to improve performance.

    var getter = gsap.getProperty(inputHandle);
    var x = getter("x");
    var y = getter("y")

     

    If you need more help, just let me know.

    • Like 5
  15. 38 minutes ago, ZachSaucier said:

    I'm disappointed you don't use double colons :) 

     

    I just copied and pasted that part from CSS tricks... the box sizing part.

    https://css-tricks.com/box-sizing/

     

    But serious question. What's the difference? I don't think I truly understand the difference.

     

    38 minutes ago, ZachSaucier said:

    I usually don't include the position: relative because sometimes I want elements to be positioned related to a grandparent.

     

    How often do you really need that? The amount of times that I've needed an element to positioned next to a grandparent is... well, like 4 times.

     

    Just kidding. I honestly don't know how many times, but it hasn't been a lot.

     

    I like using relative for all elements because, well basically that's what you really want. Without it, you have to debug why setting left, top, and z-index don't work. It gets even crazier when you throw in stacking contexts.

     

    I learned about this relative tip from David Khourshid.

     

     

     

    He does some pretty amazing work.

    See the Pen popular by davidkpiano (@davidkpiano) on CodePen

     

    • Like 2
  16. 6 hours ago, harshg said:

    So I did try for that. I added a mousemove on the window and calculated the distance of the mouse to all the particles, and moved the particles away, while storing their last position, when the mouse came close using the setInterval function. But that causes the particles/bees to jitter, as when they move ahead, their previous position automatically gets kicked in.

     

    Can you make a demo of that?

     

    I'm thinking that for this to work, you would need to animate a "container" element with a motion path, and then influence the position of a child element with your mouse movement logic.

     

     

    • Like 1
  17. 1 hour ago, RobbieC said:

    I was missing the position relative on my parent div. 

     

    I feel your pain! I've been stumped by that problem more times than I can count, but I've learned my lesson. Whenever I start on a project, the first thing I do is add this to my CSS.

     

    *, *:before, *:after {
      box-sizing: border-box;
      position: relative;
    }

     

    Trust me, it's a lifesaver.

     

     

    • Like 2
    • Thanks 1
  18. 12 minutes ago, RobbieC said:

    In order to correctly see the issue you need to view the codepen in full screen mode and do a HARD refresh of the page.

     

    I don't see any problems, but if you need to do a hard refresh to see the problem, that probably means you need to wait for images and other assets to load.

    • Like 4
  19. CSS support for clip-path is meh. It really needs support for path().

    https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path#Browser_compatibility

     

    I think CSS will be better option in the future. With SVG, you have to create an new <clip-path> element for each instance. Meaning, if you want to apply the same clip path animation to 4 different elements, but at different times, then you will need to create 4 <clip-path> elements. 

     

     

    • Like 4
    • Thanks 1
×
×
  • Create New...