ScrollMagic | The javascript library for magical scroll interactions | iOS library

In Home Components, if you scroll down, you will see the Console log something. It’s because

When entering the website, you will be in Home component with path /

But if you switch page to About/Dashboard, below error occurs

When you scroll down the page, you will see the element with #pin will be sticky and the currentPercentage will keep updating until the value of currentPercentage is 1 and then not sticky anymore.

The problem is after I scroll to some value, I click the update progress to 0.5. The value of currentPercentage will become 0.5, but if I then scroll. The value will jump to previous value.

For example, if I scroll and stop at 0.33 and then click the button, the value of currentPercentage will become 0.5.
If I scroll down now, the value will increase from 0.33 instead of 0.5, which is mainly the problem.

How to fix it?

App.js

I have couple of gif animation through out a basic HTML CSS website and i was wondering if there is a way to trigger the gif when its in the scroll view and play it once . I am doing other animations using scrollMagic but i cant seem to get control of the gif animation that well. Im not that familiar with the properties that i need to listen or keep track with event listener to play or bind control of the gif when scrolling. if there is any examples that explains similar case using gifs with the combination of screen view or scrolling please do let me know thank you!

I've created a website that uses Scrollmagic to load in portions of the site (ie, change their opacity and make them move up) as the user scrolls through it. It works fine on the HTML file on my computer, but for some reason once I uploaded it to my hosting server and went on the live site, it stopped working. The url is https://liudzi.com/. There are multiple sections that load like this, but I've included a portion of the code as an example below:

I'm using Scroll Magic for a sticky side nav. I would like the side nav to STOP right before the next section but as of now the duration endpoint is showing about 200px below where I would want. How do you set a custom endpoint regardless of the height of the content? I tried adding a negative value to the height of the duration point but then on certain pages where the height was smaller it did not work and overflowed into the next section. My ideal outcome is the sticky nav ALWAYS stops about 15px before the bottom of the .center-tab-content section.

So the problem I am facing is that some packages in my package.json file required node version greater than 10. So I have nvm package installed to manage node versions and when I do node -v it gives me this: v12.19.0. So if the node version is 12.19.0 then the error shouldn't come but I think this is a global version of node so when I do npm update, this comes up:

I want to overlap a ScrollMagic animation on a text, and not make the animation a separate section like it is right here:

There is supposed to be text over there but it made this animation into a new section where the text is at the bottom.

Code:

I am trying to import an npm package into my vue.js component. Specifically, I am trying to import ScrollMagic into my project, but I am getting it to be undefined.

I have seen people suggest previously that it should be in my mounted() hook, which I am doing but my import statements (I have tried both in main.js, and in the components tag but both have returned undefined variables. Any direction would be appreciated.

Script for my component: