Jump to content
GreenSock

Nisha Prasad

Gsap animations not working in angular when ng build --prod

Recommended Posts

I have been working on angular project and implemented gsap animations. It is working fine when is on local. But when we execute ng build --prod for deployment on server its not working. On server gsap animations are not working. Any idea plz help urgently. Thank You !!!

Link to comment
Share on other sites

Hi Nisha - It's near impossible for us to help without more information I'm afraid.

What exactly is broken? What errors are coming up? What's the difference between your local environment and this production server? Any more information you have would be very useful.

Link to comment
Share on other sites

Here is my home page ts file animation function code

 

topBoxAnimation(){
// define images
const images1 = [
"assets/images/home/falling_part/Falling_Part_00000.png",
"assets/images/home/falling_part/Falling_Part_00001.png",
"assets/images/home/falling_part/Falling_Part_00002.png",
"assets/images/home/falling_part/Falling_Part_00003.png",
"assets/images/home/falling_part/Falling_Part_00004.png",
"assets/images/home/falling_part/Falling_Part_00005.png",
"assets/images/home/falling_part/Falling_Part_00006.png",
"assets/images/home/falling_part/Falling_Part_00007.png",
"assets/images/home/falling_part/Falling_Part_00008.png",
"assets/images/home/falling_part/Falling_Part_00009.png",
"assets/images/home/falling_part/Falling_Part_00010.png",
"assets/images/home/falling_part/Falling_Part_00011.png",
"assets/images/home/falling_part/Falling_Part_00012.png",
"assets/images/home/falling_part/Falling_Part_00013.png",
"assets/images/home/falling_part/Falling_Part_00014.png",
"assets/images/home/falling_part/Falling_Part_00015.png",
"assets/images/home/falling_part/Falling_Part_00016.png",
"assets/images/home/falling_part/Falling_Part_00017.png",
"assets/images/home/falling_part/Falling_Part_00018.png",
"assets/images/home/falling_part/Falling_Part_00019.png",
"assets/images/home/falling_part/Falling_Part_00020.png",
"assets/images/home/falling_part/Falling_Part_00021.png",
"assets/images/home/falling_part/Falling_Part_00022.png",
"assets/images/home/falling_part/Falling_Part_00023.png",
"assets/images/home/falling_part/Falling_Part_00024.png",
"assets/images/home/falling_part/Falling_Part_00025.png",
"assets/images/home/falling_part/Falling_Part_00026.png",
"assets/images/home/falling_part/Falling_Part_00027.png",
"assets/images/home/falling_part/Falling_Part_00028.png",
"assets/images/home/falling_part/Falling_Part_00029.png",
"assets/images/home/falling_part/Falling_Part_00030.png",
"assets/images/home/falling_part/Falling_Part_00031.png",
"assets/images/home/falling_part/Falling_Part_00032.png",
"assets/images/home/falling_part/Falling_Part_00033.png",
"assets/images/home/falling_part/Falling_Part_00034.png",
"assets/images/home/falling_part/Falling_Part_00035.png",
"assets/images/home/falling_part/Falling_Part_00036.png",
"assets/images/home/falling_part/Falling_Part_00037.png",
"assets/images/home/falling_part/Falling_Part_00038.png",
"assets/images/home/falling_part/Falling_Part_00039.png",
"assets/images/home/falling_part/Falling_Part_00040.png",
"assets/images/home/falling_part/Falling_Part_00041.png",
"assets/images/home/falling_part/Falling_Part_00042.png",
"assets/images/home/falling_part/Falling_Part_00043.png",
"assets/images/home/falling_part/Falling_Part_00044.png",
"assets/images/home/falling_part/Falling_Part_00045.png",
"assets/images/home/falling_part/Falling_Part_00046.png",
"assets/images/home/falling_part/Falling_Part_00047.png",
"assets/images/home/falling_part/Falling_Part_00048.png",
"assets/images/home/falling_part/Falling_Part_00049.png",
"assets/images/home/falling_part/Falling_Part_00050.png",
"assets/images/home/falling_part/Falling_Part_00051.png",
"assets/images/home/falling_part/Falling_Part_00052.png",
"assets/images/home/falling_part/Falling_Part_00053.png",
"assets/images/home/falling_part/Falling_Part_00054.png",
"assets/images/home/falling_part/Falling_Part_00055.png",
"assets/images/home/falling_part/Falling_Part_00056.png",
"assets/images/home/falling_part/Falling_Part_00057.png",
"assets/images/home/falling_part/Falling_Part_00058.png",
"assets/images/home/falling_part/Falling_Part_00059.png",
"assets/images/home/falling_part/Falling_Part_00060.png",
];
 
const obj1 = {curImg: 0};
gsap.to(obj1,
{
scrollTrigger:{
trigger: ".page",
toggleActions:"restart pause reverse pause",
start:"top top",
end: "+=140%",
//markers:true,
scrub:1,
},
duration:10,
immediateRender: true,
ease: "power2",
curImg: images1.length - 1, // animate propery curImg to number of images
roundProps: "curImg", // only integers so it can be used as an array index
onUpdate: function () {
// set the image source
//$("#fallingBox1").attr("src", images1[obj1.curImg]);
if (document.querySelector("#fallingBox1")){
gsap.set("#fallingBox1", {
attr: { src: images1[obj1.curImg]} ,
duration : 2,
css:{transition:"all 2s ease"},
});
}
}
}
);
}
Link to comment
Share on other sites

The above code is working fine in local but not after ng build --prod

Link to comment
Share on other sites

I'm afraid we need more information Nisha.

 

Here are some questions.
 

What isn't working?

Can you explain how it's broken - Is it visually broken or Is the build failing?
Do you have any console errors or build errors?
What is the difference between your production environment and local? 

Any more information you can give us would be very helpful. At the moment there is nothing we can do to advise. This code snippet looks ok, but we have no additional context.

  • Like 2
Link to comment
Share on other sites

Hello,

The problem is the banner box should smoothly come down as user scroll page down. But the Scroll Trigger is not working.

 

When we do command ng serve on local its work fine.

But when we do command ng build --prod for putting files on our server.  The ScrollTrigger.create() not working.

Link to comment
Share on other sites

Ok, so a visual issue. Great that's a little further forward, thanks.

Now, I don't know what the banner box is - I also don't know what you mean by smoothly come down. I have no understanding of your project. Can you please explain this to me in simple steps?

 

Let's start by creating a working demo so I can see what it's meant to look like. Here's a starting point.

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



Optionally some debugging steps -

  • Try adding markers:true to your scrollTrigger to see whether they're in the right place
  • Log out the element you're targeting to see whether it's loaded,
  • Do a console log in the callback and see whether that's firing and updating the right property
  • Log out ScrollTrigger and see whether it's available.



 

Link to comment
Share on other sites

Yeah, it's super difficult to troubleshoot a live site. The problem could be CSS, a third party JavaScript library, markup, or any number of things. That's why we strongly recommend isolating the issue in a minimal demo. The fact that it works fine locally tells me it is very likely NOT related to GSAP. 

 

I wonder if you're dynamically loading content in after the window's "load" event which is affecting layout and therefore changing where the ScrollTrigger start/end values should be. Perhaps try calling ScrollTrigger.refresh() after you're POSITIVE that your page is completely done with its layout tasks (height is set). 🤷‍♂️

 

Otherwise, please provide a minimal demo that shows the issue and we'd be happy to take a peek for any GSAP-related questions. 

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.
×