[slide up and slide down image]

Thankyou you so much for your help, @mvaneijgen I really appreciate it.

[section opacity transition enters the viewport and becomes pinned]

Thankyou so much for your help, @mvaneijgen @Cassie I really appreciate it.

[section opacity transition enters the viewport and becomes pinned]

tl.to(section, { opacity: 0 }); // Fade out the section.
tl.from(section, { opacity: 0 }); // Fade in the section.

I want the entire section to have a fade-in effect when it comes into the viewport until it's pinned. When the section becomes unpinned and starts moving out of the screen view, I want the entire section to have a fade-out effect, not within the timeline.

https://moon-project.webflow.io/ 
I am attempting to replicate a website that contains the same type of section I'm trying to emulate. I'm doing this to practice animation using GSAP. If you scroll down past this website, you will see what I am aiming to achieve.

[section opacity transition enters the viewport and becomes pinned]

Hello everyone,

I'm seeking to create an opacity transition effect that changes from 0 to 1 as soon as a section enters the viewport and becomes pinned. During this time, the opacity of the current section should transition from 0 to 1. After the pinned section's scrolling progress is complete and it is unpinned, I aim to have the opacity of the section transition from 1 to 0 while the section is being unpinned and until it moves out of the viewport. Despite attempting various approaches, I have been unable to find a successful solution. Any assistance and guidance would be immensely appreciated.

See the Pen JjwjJzp by fastestsunil (@fastestsunil) on CodePen

[slide up and slide down image]

I understand the logic but am having trouble implementing it. If you find some free time, could you please help me fix the whole animation? Your assistance would be greatly appreciated

[slide up and slide down image]

The first two sections of this animation are working almost perfectly as I intended. However, there is one issue I would like to resolve: I want the image and text to slide up before the section is pinned, and once the section is pinned, I want the image to slide down as the user scrolls, while gradually reducing the opacity of the text based on the scroll progress.

There is also a major issue: when the third section starts coming into view, the animation of the image sliding up and down starts to break. Could you please review the animation in the first two sections? This is the effect I'm aiming for across all sections. Additionally, I would like the same animation to occur in reverse when the user starts scrolling back up. I would greatly appreciate your assistance with this. Thank you,

See the Pen jOQgbQm?editors=0010 by fastestsunil (@fastestsunil) on CodePen

[revert back scrolling animation]

'use client';
import { SectionTitle } from '@/components';
import { servicesVerticalScrollSectionData } from '@/constants/data';
import Image from 'next/image';
import { gsap } from 'gsap';
import ScrollTrigger from 'gsap/ScrollTrigger';
import { useEffect } from 'react';

export default function SolutionsVerticalScrollSection() {
  useEffect(() => {
    gsap.registerPlugin(ScrollTrigger);

    const servicesSections: HTMLElement[] =
      gsap.utils.toArray('.services-section');

    gsap.set('.services-section', {
      zIndex: (i, target, targets) => targets.length - i,
    });

    servicesSections.forEach((section, index) => {
      ScrollTrigger.create({
        trigger: section,
        start: 'top top',
        scrub: true,
        pin: true,
        // markers: true,

        pinSpacing: index === servicesSections.length - 1,
        onUpdate: self => {
          const last = index === servicesSections.length - 1;

          if (!last) {
            const progress = +self.progress.toFixed(2);
            const animText = section.querySelector('.anim-text');
            const animImg = section.querySelector('.anim-img');

            gsap.to(section, {
              yPercent: 100 * progress,
              ease: 'none',
              onComplete: () => {
                // Set the final position after animation completes
                gsap.set(section, {
                  opacity: 1 - progress,
                  ease: 'none',
                });
              },
            });

            if (progress > 0) {
              const nextPanel = servicesSections[index + 1];
              gsap.to(nextPanel, {
                opacity: progress,
                ease: 'none',
              });
            }

            // if (animText) {
            //   gsap.from(animText, {
            //     opacity: 1 - +progress,
            //     ease: 'none',
            //   });
            // }

            // if (animImg) {
            //   gsap.from(animImg, {
            //     yPercent: progress * 100, // Use progress directly
            //     ease: 'none',
            //   });
            // }
          }
        },
      });
    });
  }, []);

  return (
    <div className="bg-lighthouse py-28 overflow-hidden">
      <section className="mb-44">
        <div className="container">
          <SectionTitle
            title="How We Do It"
            subtitle="We are your comprehensive data partner for targeted marketing"
          />
        </div>
      </section>

      {servicesVerticalScrollSectionData.map((services, index) => (
        <section
          key={services.id}
          className="services-section min-h-screen-scree"
        >
          <div className="container flex flex-col">
            <div className="flex items-start w-full gap-9">
              <div
                className={`anim-img flex flex-col items-center justify-center w-full min-h-screen ${
                  index % 2 !== 0 ? 'order-last' : 'order-first'
                }`}
              >
                <Image
                  src={services.imageUrl}
                  className="object-cover"
                  placeholder="blur"
                  alt={services.imageAlt}
                />
              </div>
              <div className="anim-text opacity-1 flex items-center w-full h-screen">
                <div className="relative">
                  <div
                    className={`opacity-20 text-right text-zinc-800 text-[150px] font-semibold leading-[130px] absolute top-[-130px] ${
                      index % 2 !== 0 ? 'left-0' : 'right-0'
                    }`}
                  >
                    {services.badge}
                  </div>
                  <h5 className="font-medium text-color-primary anim">
                    {services.subtitle}
                  </h5>
                  <h2 className="text-color-secondary font-bold text-4xl tracking-wide leading-[4.5rem] sm:text-[3.3rem] sm:leading-[4.5rem]">
                    {services.title}
                  </h2>
                  <p className="mt-3 mb-5 font-normal leading-8 text-color-blue-200">
                    {services.content}
                  </p>
                </div>
              </div>
            </div>
          </div>
        </section>
      ))}
    </div>
  );
}