Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
senza12

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.

×