Jump to content

Guest zachledoux

Loop animation depending on scroll position

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts



I have an element whose opacity is being changed based on scroll position. No problem there. When the element is in the scroll range, I want it to loop an animation only while within the scroll position range. The looping the animation part is what I'm having trouble with. I tried calling a function, using onComplete, etc.



Here is the timeline:


var tlwhoweareGreen = new TimelineMax({paused:true});

tlwhoweareGreen.append( TweenLite.to($("div#whoweare-green"), 1, {css:{opacity:1, autoAlpha:1}}) );


/*I've been trying to append the timeline or call a function here. Once the opacity has been set to 1, I want it to loop back to zero and back to one, infinitely until the the user has scrolled outside the range*/


Here is the scroll function:




var getVert = $(this).scrollTop();


var getHor = $(this).scrollLeft();


function scrollTween(startPoint, endPoint, tweenName, type)


var progressNumber;

if(type == 'vertical')


progressNumber = (1 / (endPoint - startPoint)) * (getVert - startPoint);


else if (type == 'horizontal')


progressNumber = (1 / (endPoint - startPoint)) * (getHor - startPoint);


if (progressNumber >= 0 && progressNumber <= 1)




else if(progressNumber < 0)




else if(progressNumber > 1)








scrollTween(400, 800, tlwhoweareGreen, 'vertical');

$("div#whoweare-green").css("display", "block");





Link to comment
Share on other sites

Also, when the user scrolls out of range, I would like the opacity ease out, so that it doesn't look jerky.




Link to comment
Share on other sites

I'm not 100% clear on what you are trying to accomplish.

Have you tried just using a TweenMax with a repeat value? http://www.greensock.com/jump-start-js/#repeat


If you have a tween or timeline that literally repeats infinitely there isn't going to be a feasible way to control its progress() as it will never finish.


change your timeline code to this:



var tlwhoweareGreen = new TimelineMax({paused:true, repeat:10});
tlwhoweareGreen.append( TweenMax.to($("div#whoweare-green"), 1, {css:{opacity:1, autoAlpha:1}, repeat:10}) ); 


be sure to be using TweenMax.js or TweenMax.min.js



does that get you any closer to what you want?

If not, can you provide a codepen or jsfiddle example so that we can better understand what you what have working and what you need to do?

Link to comment
Share on other sites

Hi Carl,


Thanks for the response. I have a div that is positioned 800px from the top. When I scroll down the page towards it, at 400px the opacity starts to change from 0 (its css value) to an opacity of 1 as it reaches 800px. At that point the opacity is fully visible and I would like to trigger an animation loop that makes the opacity pulse from 0 to 1. If I were to scroll back up that page, I would like the opactiy to fade back out to 0 (and have the pulsing fade out).


Not sure if that is anymore clear?


Thanks again,


Link to comment
Share on other sites

Yeah, that helps a bit. thanks.


From what I understand it seems that once the alpha starts pulsing, you also want the user to be able to scroll back which will fade the alpha back to 0, but you also want the pulse to fade out at the same time.


You aren't going to be able to have a pulse tween (TweenMax with repeat) controlling the alpha at the same time the scroll-driven tween is controlling the same object's alpha.


You most likely will have to have the scroll-tween control the alpha of 1 object, and the pulse tween control the alpha of that object's parent so that there aren't any conflicts.


Here is a simple mock-up of 1 tween controlling the left and opacity of an object, and a pulsing tween controlling that object's parent.


I know this isn't exactly what you would implement, but maybe it will help:


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.