Snap a row where a svg is animated with scrolltrigger

[punchcreative]

Hi,

 

I have a row (green background) with two columns. The left column is static text, the right column is a lottie animation.

https://punchcreative.net/punchsite/

 

I'd like the row to wait with scrolling until the svg is animated fully.

Now the animation works but the rows beneath the 'green' row are scrolling over it.

I looked at some examples but can't figure it out. Snap maybe or hold the rows beneath?

 

If someone can point in the right direction I'd be thankful

 

Erik

 

Here's the code I used 

<div class="container introductie">
  <div class="row">
      <div class="col-md-6 d-sm-block">
        <?php echo $content['introductie']['tekst']; ?>
      </div>
      <div id="intro_animatie" class="col-md-6 visual d-block align-items-end mx-0 px-0">
        <!-- animatie wordt opgeroepen in document ready met jQuery -->
      </div>
  </div>
</div> 

function LottieScrollTrigger(vars) {
                let playhead = {frame: 0},
                    target = gsap.utils.toArray(vars.target)[0],
                    speeds = {slow: "+=2000", medium: "+=1000", fast: "+=500"},
                    st = {trigger: target, pin: true, start: "top top", end: speeds[vars.speed] || "+=1000", scrub: 1},
                    animation = lottie.loadAnimation({
                        container: target,
                        renderer: vars.renderer || "svg",
                        loop: false,
                        autoplay: false,
                        path: vars.path
                    });
                for (let p in vars) { // let users override the ScrollTrigger defaults
                    st[p] = vars[p];
                }
                animation.addEventListener("DOMLoaded", function() {
                    gsap.to(playhead, {
                duration: vars.duration || 0.5,
                delay: vars.delay || 0,
                        frame: animation.totalFrames - 1,
                        ease: vars.ease || "none",
                        onUpdate: () => animation.goToAndStop(playhead.frame, true),
                        scrollTrigger: st
                    });
                // in case there are any other ScrollTriggers on the page and the loading of this Lottie asset caused layout changes
                ScrollTrigger.sort();
                ScrollTrigger.refresh(); 
                });
            return animation;
            }

$(document).ready(function () {

                gsap.registerPlugin(ScrollTrigger);
                ScrollTrigger.create({
                    trigger: "#intro_animatie",
                    start: "top top",
                    end: "+=100%",
                    pin: true
                });

                LottieScrollTrigger({
                    target: "#intro_animatie",
                    path: "animatie/cv-animatie-web.json",
                    speed: "medium",
                    start: "top top",
                    end: "+=100%",
                    pin: false,
                    markers: true,
                    scrub: true
                });
}

 

[Rodrigo]

Hi,

 

Is really hard for us to debug or find an issue on a live site. Can you please provide a minimal demo (not the entire project) in order to see what you already have?

 

In the mean time the only advice I can offer you is to pin the section with the lottie animation (as the

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

from does). Otherwise we're basically talking about scroll hijacking here which is not a truly desirable thing (at least as a user I don't like it one bit).

 

Also the snapping is not really helping a lot without pinning. I honestly think the best solution is to pin the green section while the animation happens.

 

Hopefully this helps in someway, but without a minimal demo there is not a lot we can do.

 

Happy Tweening!

[punchcreative]

Hi,

 

I tried to recreate my question in codepen (first try in a while) but the svg (json file) is not showing.

See the Pen NWBdPGO by pnchcrtv (@pnchcrtv) on CodePen

 

On the test site that I was referring to I did try pinning.

Thing is that it works with pinning, but I'd like to see the row below while the svg is playing.

The pinning pushes it down as it adds padding

 

I will try and figure out why my json is not showing/loading.

But thought to give a sign of appreciation ahead.

 

Thanks,

Erik

[GreenSock]

Your CodePen isn't loading the file because your server is misconfigured and it's not allowing it to be served across domains. Look at the console and you'll see a message about CORS. 

https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors/CORSMissingAllowOrigin

 

If you don't want pinning to add pinSpacing, just set pinSpacing: false. 

 

But if you want the whole container to be pinned while that animation is playing, you should pin the container instead of the trigger element. Like pin: ".container".

[punchcreative]

I fixed the server issue, and the pin for the contaiener does the job.

This is not scroll hijacking I hope?

 

THANKS!

[GreenSock]

11 hours ago, punchcreative said:

This is not scroll hijacking I hope?

ScrollTrigger doesn't hijack native scroll, no. 

 

Glad you got it working. 🙌