when scroll the avatar is not moving with the section smoothly

[emansalameh]

Hello,

I have added avatar 3d model using three.js and animated it using GSAP animation, but when scroll down the avatar should stop and disable scrolling until the avatar finished rotation and when reverse scroll it should revers the transition i have change the camera position when enter for each section to focus on model part, could you please to fix the animation for the avatar when scroll and revers scroll with interrupt on the movement.

 

See the Pen abjdEeg by emoshkana87 (@emoshkana87) on CodePen

[Cassie]

Hi there, this pen isn't working I'm afraid, could you possibly take a look and fix the errors for us?

This demo is using threeasy but the import map for three.js may help you

See the Pen WNKeGRB?editors=1010 by GreenSock (@GreenSock) on CodePen

[emansalameh]

Dear, sorry i have updated it, kindly check, I'm new on gsap.js and three.js the idea is that I have a 3D avatar model and when scroll down change the camera position and rotate the camera to a specific part from the 3d model and so on when scroll down four sections down the camera position should change for every section to view specific part of it, could you please help?

 

A1.glb

[GSAP Helper]

Your demo isn't even firing any GSAP-related code because your loader.load(...) isn't working at all. My guess is that you're pointing at an invalid URL. If you go to https://2r-4t.com/images/A1.glb, it says "The resource you are looking for has been removed, had its name changed, or is temporarily unavailable." 

 

We're happy to answer any GSAP-specific questions, but we're not experts in Three.js, sorry. Please read the forum guidelines - we try to stay focused on the GSAP-related stuff here. 

 

Once we see an isolated demo that clearly illustrates the problem, we'll do our best to jump in and help with your GSAP-specific questions. If you need Three.js help, I'd recommend reaching out to that community.

 

Good luck!

[emansalameh]

I have uploaded on codepen, but i don't know why it's not taking it, please can you check it on the website i have add it, on the below link, you can check it only on mobile screen size, you will not see anything on desktop screen.

 

this is the link for the Model: https://28-styling.com/A1.glb

this is the link for the website: https://28-styling.com/

 

 

 

A4.glb

[GSAP Helper]

Sorry, we can't really troubleshoot live sites. Would you please provide a very simple CodePen or CodeSandbox that demonstrates the issue? 

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

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

 

If you're using something like React/Next/Vue/Nuxt or some other framework, you may find StackBlitz easier to use. We have a series of collections with different templates for you to get started on these different frameworks: React/Next/Vue/Nuxt.

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

[emansalameh]

 

Dear, I have upload it to sandbox, please check, the idea that i need the text to transform smoothly with the model for each part of the avatar when scrolling down, same as this website

https://www.midwam.com/en

could you please help? the website that I'm working only on mobile screen size 

https://codesandbox.io/s/stoic-bassi-f9ur6l

[Rodrigo]

Hi,

 

What you could do is use function based values and run a function to get the position of the element based on the current screen width:

const winWidth = window.innerWidth;
const getInitialPosition = (target) => {
  const e = document.getElementById(target);
  return -(winWidth - e.getBoundingClientRect().x);
};
tl.fromTo("#h2section1", { x: () => getInitialPosition("h2section1") }, { x: 0 }, ">");
tl.fromTo("#h3section1", { x: () => getInitialPosition("h3section1") }, { x: 0 }, ">");
tl.fromTo("#psection1", { x: () => getInitialPosition("psection1") }, { x: 0 }, ">");
tl.to("#h2section1", { opacity: 0 }, ">");
tl.to("#h3section1", { opacity: 0 }, ">");
tl.to("#psection1", { opacity: 0 }, ">");
tl.to(object.position, { y: -1, duration: 1, ease: "expo" }, ">");
tl.to(
  object.rotation,
  { y: Math.PI * 0.5, duration: 2, ease: "expo" },
  "<"
);

 

Also you should definitely look into GSAP Match Media:

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

 

Hopefully this helps. Let us know if you have more questions.

 

Happy Tweening!