Unable to animate object on scroll using scrollTrigger

[Sam17]

Hi I am using scrollTrigger. But when I am trying to scroll the object scales too much and does not go back to original size when scrolled up. 

What I want to do is, on scrolling down the mesh should scale and then on scrolling up it should go back to its original size. I am getting a problem with scrub. I even tries different scrub values.

PLEASE HELP

 

THANK YOU

 

 

 

 

 

 

[Dipscom]

Hi Sam,

 

Welcome to the forums!

 

I'm afraid it's quite hard to figure out what is going on from a screenshot and a video recording. There are many, many things in code that could be affecting it.

 

The best way to find your problem and help us to help you is to create a minimal reproduction of your issue. You can use CodePen or any online code editing platform of your choice. The simpler the better, in your case, just a box inside of the 3D viewport scaling on scroll. That way, we'll be able to see what is going on and offer suggestions. Who knows, you might even work out what is causing it by creating the reduced example.

[Sam17]

Thank you for your response. But I am not sure how to use threejs with codepen. Is there any other way you could help?

[Dipscom]

Have you got any accounts on any of the online code editors? You don't need to use CodePen if you prefer to use a different one.

 

If you don't then, I recommend creating an account. If you have no preference, create a free account in CodePen and I'll show you how to set it up to use ThreeJs with it. The only thing I won't do is download your files and set your own project up in my machine. Too laborious.

[Cassie]

https://codepen.io/collection/DrxLEd

 

This is a good simple collection of starting points! Maybe it'll help.

[Sam17]

3 hours ago, Dipscom said:

Have you got any accounts on any of the online code editors? You don't need to use CodePen if you prefer to use a different one.

 

If you don't then, I recommend creating an account. If you have no preference, create a free account in CodePen and I'll show you how to set it up to use ThreeJs with it. The only thing I won't do is download your files and set your own project up in my machine. Too laborious.

I created an account on codepen. yeah sure.

 

[Sam17]

4 hours ago, Dipscom said:

Have you got any accounts on any of the online code editors? You don't need to use CodePen if you prefer to use a different one.

 

If you don't then, I recommend creating an account. If you have no preference, create a free account in CodePen and I'll show you how to set it up to use ThreeJs with it. The only thing I won't do is download your files and set your own project up in my machine. Too laborious.

Hi. I have created the project. I stored the gltf file in fire base.

See the Pen NWYaWvJ by samruddha17 (@samruddha17) on CodePen

This is the link to my project. But my gltf file is not loading

Edited July 26, 2022 by Sam17

[Dipscom]

Hey Sam,

 

Great that you've made an account and have started recreating your project but, alas, I feel you might have already gone overboard.

 

You don't need all of those elements and libraries to test the functionality you are having issues with. In fact, you want to remove all of it. Like I said before, all you need is a simple box in the 3D environment and scrollTrigger. Nothing else. Then, you can more easily work out what to do.

 

You stated at the start of the thread that you were having issues making the object scale on scroll so, let's focus on that. Not on loading external models, bootstrap, jQuery, popper and what not. You are not looking to recreate you whole project in Codepen.

 

So, create a simple scene. One cube, no lights, a basic material, one basic perspective camera, no textures or images, no models, just that. Then, add scrollTrigger to it and see if you can cause the cube to scale when scrolling.

[Cassie]

I do agree - but just jumping in to say the world of donuts sounds great.