Jump to content
Search Community

Unable to animate object on scroll using scrollTrigger

Sam17 test
Moderator Tag

Recommended Posts

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

 

image.thumb.png.82aa2fad7eaec86c4abf5b17f89abffe.png

 

 

 

 

 

Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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.

  • Like 2
Link to comment
Share on other sites

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.

 

Link to comment
Share on other sites

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 by Sam17
Link to comment
Share on other sites

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.

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...