Loop animation depending on scroll position

[Guest zachledoux]

Hello,

 

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:

 

$(window).scroll(function()

{

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

console.log(getVert);

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)

{

tweenName.progress(progressNumber);

}

else if(progressNumber < 0)

{

tweenName.progress(0);

}

else if(progressNumber > 1)

{

tweenName.progress(1);

}

}

 

 

 

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

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

 

});

});

</script>

[Guest zachledoux]

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

 

Thanks!

Zach

[Carl]

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?

[Guest zachledoux]

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,

Zach

[Carl]

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:

http://jsfiddle.net/...bassador/yNwp5/