triggerhook | Task schedulerSimple API | Job Scheduling 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'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.

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'm working on a portfolio project and i face a strange problem when trying to list a project, ( class-based-views-DetailView). More specifically when trying to list a project for example /project/3/evillio i got following error Reverse for 'project-detail' with arguments '('', '')' not found. 1 pattern(s) tried: ['project/(?P[0-9]+)/(?P[-a-zA-Z0-9_]+)$'] but when i add a new project, i'm able to list /project/3/evillio with no problem, however i got the same error on the next project /project/4/urban.

For example i add 2 projects in project table (using Postgres) then going to list details of each project. Click on project1 and works fine. Then click on project 2 and i got error above. Then i add a third project in project table and going to list details of each project. Click on project1 works fine, click on project2 works fine, click on project3 and i got the same error as on project2 before adding project3. I hope is more clear.

urls.py

I've successfully pinned a screen in ScrollMagic and had a mask over the scene fade up in opacity. But the scene won't stay pinned while the next screen scrolls up. I want the first scene to do its animation and stay there, then the second scene scroll up over the first scene. Anyone know what I'm doing wrong? Is it because my purple-mask is absolutely positioned?

This jsfiddle doesn't have the animation working with the scroll, but for some reason, it does work on my local computer.

https://jsfiddle.net/LNMSchneiderman/rsbw3vka/27/

jquery:

I'm trying to use ScrollMagic & gsap libraries in react, everything was fine until I tried to build my code, I tried all the import solutions I could find on the web but it doesn't seem to behave the same way.

I created a list of cards that scrolls horizontally when some section is reached, on the dev version it behaves exactly that way but when I'm in a production version (after build) it scrolls in diagonal way.

Here's some of my code and how I installed the libraries:

installing gsap:

I'm trying to trigger the reveal animation of my image for each section scroll and i'm doing that with GSAP + ScrollMagic.

The problem is that i'm getting an error saying that the the tween object is not valid.