OSUblake

Welcome to the forums @Will.I.Am

I'm not exactly sure what you mean. The demo at the end of that thread seems to fine to me. Do you have a minimal demo that shows what you are trying to do?

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.

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. 

I think you just need to get rid of the pointer type.

See the Pen RwQGQpQ by GreenSock (@GreenSock) on CodePen

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.

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.

Hi Sam,

You don't need that load event listener as ScrollTrigger refreshes on load.

See the Pen dydpJzY by GreenSock (@GreenSock) on CodePen

You have invalid JavaScript right on the very first line.

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(() => {
  ...
});

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.

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.

Welcome to the forums @Nuendo

I don't see anything related to normalizeScroll in that demo. Am I missing something?

Hi @GrantCahn

It would be better if you started a new topic and include a minimal demo of what you've tried. We don't need to see your whole project, just what's relevant to the animation at hand. If you need to use React, you can use CodeSandbox.

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.

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

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.

Strange indeed. I noticed that your site has scroll-behavior: smooth on it. I'm wondering if that might be messing with something somehow.

Welcome to the forums @delivous

It's really hard to advise without having some sort of demo that can reproduce the issue. I would suggest trying to isolate the problem, commenting out code until figure out what the culprit is.

I can't say without seeing what you're doing. Please make a minimal demo of your issue on CodeSandbox.

You will definitely into issues if you don't add that empty array on the end. It's going to run everything inside that function every time renders, creating a bunch of potential issues. Also, I would suggest pinning an inner element as pinning the root element in a component can create issues.

And if you haven't already, please check out our React guide.

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. 

You first need to use proper targets for the content and wrapper. Both of those elements need to be inside the <body> tag.

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.

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.

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?

Here's just a quick demo. I'm just animating scale on the 3rd slide to show that is where you do the animations for the vertical movement.

See the Pen OJQXdBY by GreenSock (@GreenSock) on CodePen