Jump to content


Issue with TimeLine Progress

Recommended Posts

Hi all,


First of all, thank you for the lovely community and the support given. I have spend many hours going over older topics to figure things out in the past and its been a massive help.


I am working on a new project where I want to trigger animations based on a scroll position. I know this has been done many times before and after doing some research I decided that I do not want to use a plugin (like Scrollmagic for example) for performance reasons. On one of the posts here I found out that there is a newish API within JavaScript that can handle my needs called IntersectionObserver, I am using a library to make sure that I have a wide browser support for this technology (https://github.com/russellgoldenberg/scrollama). 


If you would look at my Codepen, you will notice that I am trying to trigger an animation on the second element based on the scroll position. I am using .progress(); to do so, where I call in a value between 0-1 based on the scroll position (taken from the Scrollama library). When you scroll down, you will notice that the box on the left moves position (as intended). The problem I am having though, is when you scroll up it does not move back. I am assuming that when using the .progress(); function, the timeline will be animated to whatever position is being fed into this? Unfortunately I can not get this to work. I have been searching on the internet for hours now and I just can't seem to find the issue.


Hopefully this explains my problem clear enough, thank you in advance for any help!

See the Pen LrRwYM by senza12 (@senza12) on CodePen

Link to comment
Share on other sites

You're creating a new timeline on scroll in your handleStepProgress() function which is causing a bunch of overwrites. If you create the timeline outside of that function and pause it, I think you'll see the desired results.


See the Pen vryBqR by PointC (@PointC) on CodePen


Happy tweening.




  • Like 4
  • Thanks 1
Link to comment
Share on other sites

Thank you so much for your swift reply and help Craig, this is exactly what I was looking for! 

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.