GSAP.timeline inside already existing overflow section

[naeal]

Background:

 

I am trying to implement a short GSAP code within an Elementor website. The difficult part for me right now is that I want to use it alongside a plugin that adds scrolling functionality of its own: Vertical Scroll by Premium Addons.

 

The plugin provides an out-of-the box section scroll function, which I would like to keep to reduce the overall amount of coding necessary (especially since I am not a coding professional). A demo of this plugin can be viewed here.

 

For sections that have more content than can typically be viewed in a screen height section, Premium Addons has an additional option for adding content overflow (following the link provided, look at the second section which has a second scroll bar next to the main browser scroll bar).

 

Now, within such an overflow section I would like to add a simple GSAP timeline animation. My code for this is:

<script>
    document.addEventListener( 'DOMContentLoaded', content_fade_in );

    function content_fade_in() {

        var tl   = document.querySelector('#reflect-process');
        var tl_p = tl.querySelectorAll('.timeline-panel');

        //timeline panel fade in animation
        var tl_tween = gsap.timeline({scrollTrigger: {trigger: tl, 
                                                     scroller: '#scroller-reflect-process', 
                                                        start: 1, 
                                                        scrub: true, 
                                                          pin: '.inner-section', 
                                                      markers: true}}); 

        for (var i=0; i<tl_p.length; i++) {                
            tl_tween.to(tl_p[i], {visibility: 'visible', opacity: 1});
        }
    }
</script>

I have tried out this code within an environment that does not load the above-mentioned plugin and I know that it generally works as expected. The problem that I am having stems exclusively from the element that I am trying to pass through the scroller: attribute, #scroller-reflect-process.

 

#scroller-reflect-process is a div containing the above-mentioned plugin's event handler for the mouse scroll.

 

My hope was that passing this element to gsap.timeline would lead to gsap understanding that it is handed an overlflow section with a scroll bar and to then calculate the animations play progress based on the scrolling progress of this element.

 

However, loading the page, the following error is thrown:

Uncaught TypeError: t is undefined gsap.min.js:10:1254

 

As I said, I do not know much about coding, but my impression is that GSAP expects to be passed an element without an already existing overflow. In fact, if I pass an element without an overflow, no errors occur and GSAP adds is own overflow-y: scroll attribute to it.

 

Now, you could say that one solution could consist in removing the plugin's overflow and to just go with the overflow and scroll area automatically added by GSAP. Unfornately, however, this is not an option, since Premium Addon's plugin is not aware of overflow sections that is has not created by itself, meaning that when mouse wheel scrolling, the section scroll will skip right past the GSAP overflow content to the next full height section it is aware of.

 

I hope my explanation was clear enough and that there is actually a solution as well. Please let me know if you need any more from me. Thanks.

 

[OSUblake]

Welcome to the forums @naeal

 

It's impossible to tell what that error is. You would need to use non-minified version of GSAP so the error message will be human readable and then you can find where the error is in the stack trace. Beyond that, it's really hard to advice without some sort of minimal demo to see what's going on. It sounds like you may need to wait for the plugin load before running your GSAP code.