Issue with TimeLine Progress

[senza12]

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

[PointC]

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.

 

 

[senza12]

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