Text div show and hide

[Generic1]

 Hi,

Iam working with TweenMax and I would have a question concerning animation of my menu.
The code below shows my current behaviour: I have text- blogs and if the use scrolls down than the text blogs
move up to become the menu of the page.

My problem now is, that I dont know how to show "menuItems" again (when scrolling up) after I have hide it with scrolling down.

Thanks a lot for help and maybe hints to improve the code above.

 

Generic

<script>
           $(document).ready(function() {
                    var controller = $.superscrollorama({
			triggerAtCenter: true,
			playoutAnimations: false,
                        autoRemoveChildren : true
		});
            
                    controller.pin($('#headMenu'), 800, {
                        anim: (new TimelineLite())
                          .append([
                            TweenMax.fromTo($('#move-it3'), 6.0, 
                              {css:{left: "1%", top: 480, color:"#fff", fontSize: "1.8em"}, immediateRender:true}, 
                              {css:{top: 0, left: "+=150px", color:"#fff", fontSize: "1.3em"}
                            })
                          ])
                          .append([
                            TweenMax.fromTo($('#move-it2'), 10.0, 
                              {css:{left: "8%", top: 130, color:"#fff", fontSize: "1.8em"}, immediateRender:true}, 
                              {css:{top: 0, left: "+=55px", color:"#fff", fontSize: "1.3em"}}),
                            TweenMax.fromTo($('#move-it1'), 4.0, 
                              {css:{left: "14%", top: 340, color:"#fff", fontSize: "1.8em"}, immediateRender:true}, 
                              {css:{top: 0, left: 185, color:"#fff", fontSize: "1.3em"},  
                             })
                          ])
                         .append([
                            TweenMax.fromTo($('#move-it'), 14.0, 
                              {css:{left: "4%", top: 470, color:"#fff", fontSize: "1.8em"}, immediateRender:true}, 
                              {css:{top: 0, left: "+=70px", color:"#fff", fontSize: "1.3em"},
                              onComplete: function() {
                                 $('.menuItem').hide();
                                },
                              onStartListener: function() {
                                  alert('onStartListener');
                                } 
                            })
                         ]),
                      onComplete: function() {
                            }
                      });
                      
                   $(window).resize(function () {
                    controller.triggerCheckAnim();
                    });
            });
    </script>

[Carl]

Hi and welcome to the GreenSock forums,

 

It appears this question is tightly related to how Superscrollorama works and triggers animations. You could try posting an issue on the SuperScrollorama github repository. However, I don't think that library is actively maintained anymore. The author recommends you switch over to ScrollMagic which is pretty much SuperScrollorama 2.0 but built from scratch by another developer. We've seen great results from ScrollMagic.

 

Check it out here: http://janpaepke.github.io/ScrollMagic/

Seek help here: https://github.com/janpaepke/ScrollMagic/issues

 

Our expertise is in our own tools and we really don't know all that much about all the third party tools that tap into GSAP.

 

I'm confident though that what you are trying to do should be pretty easy with ScrollMagic.