Jump to content
GreenSock

OSUblake last won the day on May 13

OSUblake had the most liked content!

OSUblake

Administrators
  • Posts

    9,196
  • Joined

  • Last visited

  • Days Won

    704

Posts posted by OSUblake

  1. Hi chailandau,

     

    First off, you're random duration thing here does nothing, nor is it even scoped correctly due to the arrow function. But we can worry about how to due random durations later.

     

    onRepeat: () => {
              this.duration(randomDuration);
            }

     

    As for the flickering, it might be a browser rendering issue. Try isolating what the problem might be. My first guess would be those filters.

     

    • Like 2
  2. 13 minutes ago, Elindo said:

    Well...

     

    That was the GSAP template from here 

     

    Your effect did not have an empty array at the end. 

     

    15 minutes ago, Elindo said:

    I think.... I am going to use the useEffect specifically on the problems items... 

     

    Please, just go through the React guide. 

     

  3. 45 minutes ago, Mantrone said:

    this is a logical behavior as for javascript it's not only a drag, but a click on the element.

     

    You'll probably have to call preventDefault on the event depending on what gesture it should be.

     

    • Like 1
  4. 24 minutes ago, FullMiga said:

    under what name/category would this "type of project" fit in, I don't know understood, type (immersive trip, virtual space).

     

    I'm not sure, but you could search on awwwards and find something that matches up with what you're doing to give you an idea.

     

    For example, here's the search results for immersive trip...

    https://www.awwwards.com/inspiration/search?text=immersive trip&type=submission

    and virtual space...

    https://www.awwwards.com/inspiration/search?text=virtual space&type=submission

     

    They both seem pretty similar.

     

     

    • Thanks 1
  5. You have invalid JavaScript right on the very first line.

     

    image.png

     

    And if you're trying to calling to that btnstop function in the onClick, that will not work. That's just basic JavaScript. You cannot call a nested function.

     

    function outer() {
      function inner() {
        console.log("hello");
      }
    }
    
    inner(); // error

     

    And please go through that React guide. This is not recommended.

     

    useEffect(() => {
      ...
    });

     

     

     

  6. Welcome to the forums @FullMiga

     

    I'm a little unsure about what you're asking here. Are you wanting us to help you go through the code on that site? If so, that's not something we can help you with.

     

    As far as the naming goes, that's totally up to the developer. There aren't a lot of standardized names for animations. If something is moving along a path, then that might be a motion path, but again, that's up to developer what they want to call it.

     

    • Thanks 1
  7. 3 hours ago, jeromebart said:

    Hi, you can see the problem on this link https://bart-studio.ch/inprogress/realisations/ that I provided above

     

    I don't even know what I'm supposed to be looking at. If you're talking about clicking on those 6 images, then the problem is probably due to that fact that the layout is changing, i.e. the images are changing in size, so the top of where they appear in the document is not constant. That's something you'll need to make adjustments for when creating your scroll tween.

     

     

    • Like 1
  8. The first thing you need to do for React is to make sure React 18 isn't going create any issues. You need to make sure it doesn't create something twice.

     

     

    You also need to create that smooth scrollbar thing before creating your ScrollTriggers. Code in a child component will run before their parent, so that means your smooth scrollbar is being created last.

     

     

    • Like 1
    • Thanks 1
  9. Welcome to the forums @KristineJ

     

    You might be able to use the MorphSVGPlugin, which is a Club GreenSock perk.

     

    Other than that, animating a plant swaying is not trivial. It definitely ranks up there on the difficulty scale. I made some grass animations several years ago, and even the most basic version required ended up being really math heavy.

     

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

     

    • Like 2
  10. Well, there's really no easy entry into the world of canvas programming. It's just one of those areas that takes time to build up skill with, but we might be able to work through this together.

     

    The first thing we need to do is to reduce the number of paths. I can't tell, but is it the same path being drawn over and over again, but at a different rotation and size/scale? If we could narrow that down to single path, that really help improve canvas performance. While canvas is faster than SVG, it's not a silver bullet, and does require a lot of careful programming to optimize.

     

  11. 7 minutes ago, Elindo said:

    The problem comes right as soon as you call gsap in here:

     

    Again, go through that React guide. It will not be problem once you put those calls inside an effect. 

  12. I'm not sure what you mean, but those gsap.set calls are 100% wrong in React, and Next.js is just React. The error might be a little different in next.js because it uses SSR, so there is no document when those calls are made.  Put those calls inside an effect, just like the guide shows, and you should be good. If not, please provide a minimal demo of the issue. You can use Codesandbox for next.js.

  13. Hi Elindo,

     

    Please check out our React guide. GSAP is not going to be able to find any elements before the component has rendered. All GSAP code needs be inside an effect or some other function is called after the component has been rendered.

     

     

  14. Hi kobracode,

     

    I've read your question several times, but I'm unsure about what you're asking. Can you please clarify your question with more details?

×