Jump to content

Gary Griswold

Window scroll animation halted by append innerHTML

Moderator Tag

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 am trying to animate scrolling of text, while the user is listening to the text being read, using the following JS with Greensock calls.


        document.body.addEventListener(BIBLE.SCROLL_TEXT, function(event) {
            var nodeId = event.detail.id;
            var verse = document.getElementById(nodeId);
            if (verse) {
                var rect = verse.getBoundingClientRect();
                TweenMax.to(window, 1.2, {scrollTo: { y: rect.top + window.scrollY - that.headerHeight}});


This solution works some of the time.  Actually it works almost all of the time if I change it to a TweenMax.set.


The problem seems to be that text is dynamically added while scrolling occurs.  Currently the program checks for the need for text to be added every 0.25 seconds.  Even adding text at the end of the document is making the above animation not work.


I tried to add a condition to the logic that adds text to prevent it from executing while scrolling was continuing.  But, this did not improve the reliability of the animated scrolling.


     if (!TweenMax.isTweening(window)) {

          .... code that executes every 0.25 seconds, and sometimes adds text.

           var rootNode = document.createElement('div');
           rootNode.setAttribute('id', 'top' + this.nodeId);
           rootNode.innerHTML = html;



The text being added is chapters of the Bible, one chapter at a time, so it is not a small amount of text.


Does anyone have any ideas?  Given the complexity of the infinite scroll, and the fact that I read text from a sqlite database I don't know if I could produce a codepen.


Thanks for any help.


Link to comment
Share on other sites

A couple quick questions ... by the looks of it, this isn't a continuous scroll, but a scroll to a paragraph as it becomes available via the 0.25 second check. Is that right? Also, what is causing that 0.25 second check to fire every 0.25 seconds? It seems to be that the check for new content should be calculated by predetermined intervals based on the audio playhead position.


A codepen would definitely help ... you can simply create an array of a sample of chunks to be brought in dynamically by some check at a regular interval. that way we can see how the Tweens are being applied to the elements or containers.

  • Like 5
Link to comment
Share on other sites

If I understand correctly, problem is you are missing target if text gets added while scrollTo is animating, right? You can get around that by recreating tween every time you add new text.


Following thread had similar issue, it uses onUpdate call to tween using new target values but if you are not animating height(plus not really good idea for performance) of  new text then just updating once should be enough.



  • Like 4
Link to comment
Share on other sites

Thanks guys.  The solution turned out to be easier than I imagined.  My Tween needed autoKill: false.  Reading your suggestions reminded me that I was using a plugin, and reading the plugin's documentation was what I needed.



          TweenMax.to(window, 0.7, {scrollTo: { y: rect.top + window.scrollY - that.headerHeight, autoKill: false }});



I don't know if the .killTweensOf(window) is really needed.  I will test that shortly.

  • Like 1
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.