Pin the parent div and scroll all it's child divs

[carrot]

hey!! suuupper new to GSAP. I am trying to replicate this website's "master your money" section animation https://jupiter.money/ . I have tried to implement it. Below is my code which I tried so far.

 

import React, { ReactElement, useEffect, useState } from "react";

import gsap from "gsap";

import { useLayoutEffect, useRef } from "react";

import ScrollTrigger from "gsap/dist/ScrollTrigger";

 

gsap.registerPlugin(ScrollTrigger);

const spotlights = [

{

id: 1,

icon: "",

title: "Master coding with interactive practice.",

},

{

id: 2,

icon: "",

title: "Build coding skills with practice problems.",

},

{

id: 3,

icon: "",

title: "Practice coding, unlock your potential.",

},

{

id: 4,

icon: "",

title: "Earn coding certifications with tests.",

},

{

id: 5,

icon: "",

title: "Guided learning with courses.",

},

];

 

const togglePosition = "fixed left-0 right-0 w-full";

const Spotlights = () => {

const [mount, setMount] = useState<boolean>(false);

const [activeSlide, setActiveSlide] = useState<number>(0);

 

const component = useRef() as React.MutableRefObject<HTMLDivElement>;

const sliderContainer = useRef() as React.MutableRefObject<HTMLDivElement>;

 

useEffect(() => {

setMount(true);

}, []);

 

const tl = useRef();

 

useLayoutEffect(() => {

let ctx = gsap.context(() => {

let container = document.getElementById("spotlights");

let contents: HTMLElement[] = gsap.utils.toArray(".content");

 

gsap.set(contents, { autoAlpha: 0, y: 500 });

 

let tl = gsap.timeline({

scrollTrigger: {

trigger: component?.current,

scrub: 1,

pin: true,

pinType: "fixed",

pinSpacing: true,

start: "center center",

end: () => "+=" + window?.innerHeight * 3,

markers: true,

onUpdate: (self) => {

// get the active slide index based on the ScrollTrigger progress

const activeIndex = Math.round(self.progress * contents.length);

setActiveSlide(activeIndex - 1);

},

},

});

contents.forEach((content: any, idx) => {

tl.to(content, {

duration: 0.33,

opacity: 1,

autoAlpha: 1,

keyframes: {

y: [1000, 200, idx * -content.offsetHeight],

},

});

});

}, component);

return () => ctx.revert();

});

 

return (

<section

id="spotlights"

className={` spotlights bg-[color:var(--theme-color5)] h-full`}

>

{/* /* -------------------------------- LEFT PANE ------------------------------- */}

<div

ref={component}

className="spotlight--container md:flex px-4 h-full flex-col-reverse md:flex-row items-start hidden max-w-6xl mx-auto"

>

<div

className={`py-12 lg:py-20 relative lex-1 text-center lg:text-left lg:mr-6`}

>

<h2 className="text-[1.5rem] sm:text-4xl md:text-4xl lg:text-4xl pt-2 pb-3 mb-7">

<span className="text-[color:var(--secondary-color)]">

spotlights&nbsp;

</span>

of abc

</h2>

<ul className="flex flex-col gap-2">

{spotlights.map((item, idx) => {

return (

<>

<li

key={item.id}

className={`transition-all ease duration-300 ${

activeSlide === idx &&

"bg-[color:var(--theme-color3)] rounded-md"

}`}

>

<h4 className="flex p-4 rounded-md font-medium transition-all ease duration-1000 text-xl text-[color:var(--theme-color2)]">

<span className="ml-4">{item.title}</span>

</h4>

</li>

</>

);

})}

</ul>

</div>

 

{/* /* ------------------------------- RIGHT PANE ------------------------------- */}

<div

id="right"

ref={sliderContainer}

className="container flex-1 ml-6 relative h-[inherit]"

>

{spotlights.map((item, idx) => {

return (

<>

<div

key={idx}

data-controller="scroll-spotlight"

id="one"

className={`content content1 h-full transition-transform ease duration-2000 bg-[color:var(--secondary-color-light)] flex justify-center items-center z-[${

idx * 10

}] absolute w-full`}

>

{item.title}

</div>

<div className="spacer h-[inherit]"></div>

</>

);

})}

</div>

</div>

</section>

);

};

 

export default Spotlights;

 

It's behaving weird. I am not sure what is actually going wrong. The animation speed is too fast and the sliding animation on scroll isn't working i want it to. I have been stuck with this for two days. Any help is appreciated.

 

the link to current working is attached below

https://drive.google.com/file/d/1u89IQHwBlYncTxg3e64OzRV2I1sl6lqE/view

[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 CodeSandbox that demonstrates the issue? 

 

When using ScrollTrigger the best thing to do is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in. 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). 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

 

If you're using something like React/Next/Vue/Nuxt or some other framework, you may find StackBlitz easier to use. We have a series of collections with different templates for you to get started on these different frameworks: React/Next/Vue/Nuxt.

 

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

[carrot]

1 hour ago, GSAP Helper said:

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 CodeSandbox that demonstrates the issue? 

 

When using ScrollTrigger the best thing to do is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in. 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). 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: 

 

 

If you're using something like React/Next/Vue/Nuxt or some other framework, you may find StackBlitz easier to use. We have a series of collections with different templates for you to get started on these different frameworks: React/Next/Vue/Nuxt.

 

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

Hey! Thankyou so much. I followed your steps and it's working right now. Guess onUpdate and some position css were causing the issue. 

[carrot]

1 hour ago, GSAP Helper said:

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 CodeSandbox that demonstrates the issue? 

 

When using ScrollTrigger the best thing to do is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in. 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). 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: 

 

 

If you're using something like React/Next/Vue/Nuxt or some other framework, you may find StackBlitz easier to use. We have a series of collections with different templates for you to get started on these different frameworks: React/Next/Vue/Nuxt.

 

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

Also, is there a way i could get the index of active slide. Previously I was using onUpdate for it but it was causing the glitch. 

https://stackblitz.com/edit/nextjs-ksljx9?file=styles%2Fglobals.css,heroSection.jsx,main.jsx,pages%2Findex.jsx

 

[GreenSock]

I assume you mean something like this: 

let increment = 1 / contents.length;
Math.max(0, Math.floor((tl.scrollTrigger.progress - increment / 2) / increment))

Which assumes you want it to change around halfway through when the "new" one is animating in. 

 

https://stackblitz.com/edit/nextjs-smxwdu?file=styles%2Fglobals.css,heroSection.jsx,main.jsx

 

Does that help?