Can i initialize gsap scrool after other stuff is done ?

[V1gil]

Can i initialilize gsap after class is added with jquery as other vent will be finished.

So in here I have few things happening scroll snaping to div with class .panel, adding a class after i am in it and only doint this on desktop/tablet version.

The problem is I have scrolling for other thing, and using this code, the scroling becomes uneven (which is good after, but before the scrolling its not working correctly) and I am wondering can I solve this by initializing the code below after I add class on something ?

 

let mm = gsap.matchMedia(); 
    mm.add("(min-width: 768px)", () => {


        mm.revert();

        gsap.registerPlugin(ScrollTrigger, ScrollToPlugin);

        let panels = gsap.utils.toArray(".panel"),
            observer = ScrollTrigger.normalizeScroll(true),
            scrollTween;
 
        document.addEventListener("touchstart", e => {
            if (scrollTween) {
                e.preventDefault();
                e.stopImmediatePropagation();
            }
        }, {capture: true, passive: false})

        function goToSection(i) {
            scrollTween = gsap.to(window, {

                scrollTo: {y: i * innerHeight, autoKill: false},
duration:2,
                onStart: () => {
                    observer.disable(); 
                    observer.enable();
                }, 

                onComplete: () => scrollTween = null,
                overwrite: true
            });
        }

        panels.forEach((panel, i) => {
            ScrollTrigger.create({
                trigger: panel,
                toggleClass: {targets: panel, className: "active"},
                start: "top bottom",
                end: "+=199%",
                duration: 1000,
                ease: "power1.inOut",
                onToggle: self => self.isActive && !scrollTween && goToSection(i),

            });
        });
 
    });

[GSAP Helper]

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or Stackblitz that demonstrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best. See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

 

Using a framework/library like React, Vue, Next, etc.? 

CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import the gsap-trial NPM package for using any of the bonus plugins: 

• React (please read this article!)
• Next
• Svelte
• Sveltekit
• Vue
• Nuxt

 

Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

[V1gil]

Ok, i 've roughly made codepen for this crazy idea -> 

See the Pen gOqmgaN by v1gil (@v1gil) on CodePen

 

Whats is happening here. So there is a  .before-element class element which starts in a page, it has a scrolling effect ( you scroll down and its size increases, when you scrool to 100 percent of element height it disapears).

 

First problem is that scrolling is uneven, I understant it gets its scrolling from function goToSection, but the problem is that it shoulnt work it that before-element block and should only start working after that element closes(opacity.0).

 

[Rodrigo]

Hi,

 

The main issue here is that you have that particular element with an absolute position, so the panel elements are behind it are already at the top of the viewport, so the start point of those ScrollTrigger instances has already been reached, hence ScrollTrigger is doing exactly what is supposed to.

 

The way I see it there are two options here:

1. Use ScrollTrigger with a specific snapping values and pin the purple element for a certain amount of scroll, which also will avoid you to do all these calculations on ever scroll event, which seems quite wasteful IMHO:

   $(document).ready(function () {
     $(window).on("scroll", function () {
       var obj = $(".before-element");
       var currY = $(window).scrollTop();
       var postHeight = $(window).height();
       var scrollHeight = obj.height();
       var scrollPercent = 0;
       scrollPercent = (currY / (scrollHeight - postHeight)) * 100 + 30;
       if (scrollPercent > 30 && scrollPercent < 100)
         $("div.moving-element").css("min-width", scrollPercent + "%");
       if (scrollPercent > 100) {
         $(".before-element ").addClass("finished");
         $("html:not(.movement-finished)").scrollTop(0);
         $("div.moving-element").css("min-width", "100%");
         $("html").addClass("movement-finished");
       }
     });
   });

2. Use the Observer Plugin in combination with ScrollTrigger to achieve something similar based on an amount of events, like this demo:
   

   See the Pen oNdNLxL by GreenSock (@GreenSock) on CodePen

Hopefully this helps.

Happy Tweening!