[Laggy GSAP Animation when CSS Animation is off (Mobile Only)]

Hi @mvaneijgen

 

Thanks for your help!

Setting "will-change: transform" to the ".blob" class  did in fact fix the lag. I find it weird though, since it actually does not change.

So you did help me fix the issue, but I dont get why 😅

Also there were "all" transitions in my code. I took them out but it didnt have any effect. 

 

[Laggy GSAP Animation when CSS Animation is off (Mobile Only)]

Hello!

 

I am having a weird issue with my Animations when in a particular instance.

My page consists of: 

SVG-Letters that get animated in on page load

4 absolutely positioned blurred circles in the background that have a css animation on them.

For the sake of testing I've reduced the CSS animation so that it basically doesn't do anything (translate(0px, 0px) scale(1))

 

When I take the animation off the circles, the letter animation on mobile is really laggy, when I put the animation back it works well again. 

 

For this I have prepared a demo: 

https://layered-2023-git-mobile-tag-anzorasadovs-projects.vercel.app/en

When navigating to the site with mobile you will notice the svg animation being laggy. 

Clicking on the "toggle animation blob" button with enable the animation on the circles (which, again, doesn't really do anything)

Clicking on "rerun" will rerun the svg animation, which will run smoothly.

 

I am really curious about what the issue might be and I hope you guys can help me figure it out. 

 

Thanks!

[Stacked Card Animation]

I've encountered this pen recently. I think it does what you're trying to do. However I didn't have the patience to come up with a way of integrating this into a fully functioning page. 

Also don't forget that you interrupt natural scrolling and you should think of a way to get the user to "unstuck" from this endless scrolling. 

Do let me know if you figure it out, Im curious

 

See the Pen LYRwgPo?editors=0010 by GreenSock (@GreenSock) on CodePen

[Stacked Card Animation]

Hello! 

I know its a bit late, and I am also very new to gsap, but maybe this solution helps as well. This one has "prev" and "next" buttons. 

Its a bit messy though

 

See the Pen wvjGoBx by BobbyMcBobbyboy (@BobbyMcBobbyboy) on CodePen

[Upper elements vertical margin animation does not affect scrollTrigger of the element underneath]

You guys are right, 

thank you for taking time to help me out, I appreciate it a lot!

[Upper elements vertical margin animation does not affect scrollTrigger of the element underneath]

Finally got around to review and respond!

 

Thanks @mvaneijgen! Your approach is definitely the closest to what I've imagined. 

However, I am afraid it breaks if user has disabled JavaScript. 

Maybe its an irrational fear, but I am keen on websites working without JS, just in case

[Upper elements vertical margin animation does not affect scrollTrigger of the element underneath]

Hello!

 

my bad, i didnt explain it well enough: 

I want my card-container to overlap the hero on scroll (just like in the first pen of my initial post) and once the card-container reaches the top of the screen i want my cards to get pinned and scaled away to "make room" for the next card (just like in the second pen).

But since the hero marginBottom changes the y position of the card-container it messes up my scrolltriggers for the cards. that was my issue that i couldnt figure out.

 

I understand the ScrollTrigger issue and I thought there is no way to achieve what I wanted without two scrollTriggers. But lets put it aside for now. 

[Upper elements vertical margin animation does not affect scrollTrigger of the element underneath]

Thanks for your response @Rodrigo

 

Ad Hero Animation:

In the provided solution you created the ScrollTrigger, but I am not sure it does anything. Or I am just missing the point. 

 

Ad nested ScrollTriggers: 

I was aware of that logic issue and I think I managed to get it working without glitching. Unfortunately, I do need the second trigger because I want to hide the card when its out of sight, which lead me to this solution (combined your and my solutions):

cardWrappers.forEach((wrapper, i) => {
  gsap
    .timeline({
      scrollTrigger: {
        trigger: wrapper,
        start: "top top",
        end: "bottom top",
        pin: true,
        pinSpacing: false,
        snap: 1,
        scrub: true,
        id: (i + 1).toString(),
        markers: { indent: 150 * (i + 1) },
      },
    })
    .to(wrapper, { scale: 0.97 })
    // pinning and scaling is finished here, the next card covers the current card completely 
    .to(wrapper, {
      autoAlpha: 0,
      scrollTrigger: {
        trigger: wrapper,
        start: "top+=5 top",
        end: "+=50",
        scrub: true,
      },
    });
    // further scrolling hides the current card 
});

 

[Upper elements vertical margin animation does not affect scrollTrigger of the element underneath]

Hello! 

 

I am using 2 different animations with scrollTriggers: 

1: negative bottom margin on my .hero so the content underneath "scrolls over" the hero

2: "the content" being cards that are pinned and snapped to the top of the page.

 

Animation number 2 works fine without animation number 1. 

Animation number 1 changes the top offset of animation number 2 and thus the scrollTrigger point does not get updated. 

 

Is there any way to get around it?

Any help would be appreciated   

I am attaching 2 pens, one with "hero" animation, that messes up my "cards" scroll trigger, and one without the "hero" animation

 

 

See the Pen YzgveGJ?editors=1010 by BobbyMcBobbyboy (@BobbyMcBobbyboy) on CodePen

See the Pen jOJKYGR by BobbyMcBobbyboy (@BobbyMcBobbyboy) on CodePen

[ScrollTrigger Pin: item jumps]

Thank you very much @GSAP Helper!

I cant believe I missed it. Easy solution, love it

[ScrollTrigger Pin: item jumps]

Hello All!

 

I am facing a weird issue that I haven't seen anyone else encounter. Or maybe I was just searching for the wrong terms. \

 

Basically I have a Next.js instance where I am trying to pin a box to a scroll area... pretty straight forward. However, once the pinning is initiated, the box jumps down to a position where it should end up once the scroll is over. Im gonna attach a recording to explain the issue. 

 

Any help would be appreciated.

 

here is my code:

"use client";
import { useEffect, useRef } from "react";
import gsap from "gsap";
import ScrollTrigger from "gsap/dist/ScrollTrigger";

gsap.registerPlugin(ScrollTrigger);

export default function Home() {
  const pinContainer = useRef(null);

  useEffect(() => {
    initScrollTrigger();
  }, []);

  const initScrollTrigger = () => {
    gsap.to(".block", {
      scrollTrigger: {
        trigger: ".block",
        start: "top center",
        end: "top center-=300",
        pin: true,
        scrub: true,
        markers: true,
      },
      x: 400,
    });
  };

  return (
    <main>
      <div className="content" style={{ paddingRight: 100 }}>
        <h1>Content Content Content Content Content Content Content Content Content Content Content Content Content Content </h1>
        <h1>Content Content Content Content Content Content Content Content Content Content Content Content Content Content </h1>
        <h1>Content Content Content Content Content Content Content Content Content Content Content Content Content Content </h1>

        <div className="block h-64 bg-black" ref={pinContainer} style={{ height: 200, background: "red", display: "inline-block" }}>
          test test test{" "}
        </div>
        <h1>Content Content Content Content Content Content Content Content Content Content Content Content Content Content </h1>
        <h1>Content Content Content Content Content Content Content Content Content Content Content Content Content Content </h1>
        <h1>Content Content Content Content Content Content Content Content Content Content Content Content Content Content </h1>
      </div>
    </main>
  );
}