[Multiple pins causing second pin to break]

Hey @Rodrigo,

 

Thanks for your reply. I tried useGSAP hook but still I am having the same problem. It is working on my codepen but not in my project. It is a strange issue as if I dont put the elements in separate components and keep the code as it is on the page with both the useGSAP hooks it works. But if I make components for both of them the second one breaks.

The problem is the second pin scrolltrigger start point is off from the amount of pinspacing from the first element. I tried removing pin from first element and second element started working fine. I dont know what is causing this issue. Please help

 

  useGSAP(
    () => {
      const mm = gsap.matchMedia();
      mm.add(
        {
          small: '(max-width: 767px)',
          large: '(min-width: 768px)',
        },
        (ctx) => {
          const { small } = ctx.conditions;
          let serviceSection = document.querySelector('.service-block');
          gsap.to('.service-block', {
            x: () => serviceSection.scrollWidth * -1,
            xPercent: 100,
            scrollTrigger: {
              trigger: '.service-block',
              start: '0% 20%',
              end: '+=2000px 10%',
              pin: serviceWrapper.current,
              scrub: 0.5,
              // invalidateOnRefresh: true,
              // markers: true,
            },
          });
        }
      );
    },
    {
      scope: homeMain,
    }
  );

// component

import React, { useEffect, useRef } from 'react';
import Heading from '../Heading/Heading';
import FeaturedWork from '../FeaturedWork/FeaturedWork';
import gsap from 'gsap';
import { ScrollTrigger } from 'gsap/dist/ScrollTrigger';
import { useGSAP } from '@gsap/react';

const workContent = [
  {
    projectName: 'NextGen Marketplace',
    projectType: 'E-COMMERCE PLATFORM DEVELOPEMENT',
    projectUrl: '/',
  },
  {
    projectName: 'NextGen Marketplace',
    projectType: 'E-COMMERCE PLATFORM DEVELOPEMENT',
    projectUrl: '/',
  },
  {
    projectName: 'NextGen Marketplace',
    projectType: 'E-COMMERCE PLATFORM DEVELOPEMENT',
    projectUrl: '/',
  },
  {
    projectName: 'NextGen Marketplace',
    projectType: 'E-COMMERCE PLATFORM DEVELOPEMENT',
    projectUrl: '/',
  },
  {
    projectName: 'NextGen Marketplace',
    projectType: 'E-COMMERCE PLATFORM DEVELOPEMENT',
    projectUrl: '/',
  },
];

gsap.registerPlugin(ScrollTrigger);
const SelectedWorkSection = ({ className }) => {
  const workWrapper = useRef();
  const main = useRef();

  useGSAP(
    () => {
      const mm = gsap.matchMedia();
      mm.add(
        {
          small: '(max-width: 767px)',
          large: '(min-width: 768px)',
        },
        (ctx) => {
          const { small } = ctx.conditions;
          let workSection = document.querySelector('.work-block');

          gsap.to('.work-block', {
            x: () => workSection.scrollWidth * -1,
            xPercent: 100,
            scrollTrigger: {
              trigger: '.work-block',
              start: 'center center',
              start: '0% 20%',
              end: '+=2000px 10%',
              pin: workWrapper.current,
              scrub: 0.5,
              invalidateOnRefresh: true,
              markers: true,
            },
          });
        }
      );
    },
    {
      scope: main,
    }
  );
  return (
    <section ref={main} className={`section-pad overflow-hidden ${className}`}>
      <div className="container">
        <Heading className="mb-12 " icon>
          Selected Work
        </Heading>
      </div>
      <div className=" ">
        <div className="container">
          <div className="work-wrapper-main " ref={workWrapper}>
            <div className="work-wrapper">
              <div
                className={`flex h-full work-block flex-wrap md:flex-nowrap gap-8 md:gap-0`}
              >
                {workContent.map(
                  ({ projectName, projectType, projectUrl }, index) => (
                    <div key={index} className="md:min-w-[50%] md:px-4 ">
                      <FeaturedWork
                        initialText={`0${index + 1}`}
                        projectName={projectName}
                        projectType={projectType}
                        projectLink={projectUrl}
                      />
                    </div>
                  )
                )}
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export default SelectedWorkSection;

 

[Multiple pins causing second pin to break]

Hello,

I am stuck into a weird problem. I am working in next JS and I have two components that have the identical animations. The problem is that the pin of first element is causing the pin of second element to break as you can see on codepen. Can you please tell me what I am doing wrong here.

 

This is the code I am using inside both the components. Selectors are different for both of them.

 

Please help me

  useEffect(() => {
    if (window.innerWidth > 767) {
      let ctx = gsap.context(() => {
        let serviceSection = document.querySelector('.service-block');
        gsap.to('.service-block', {
          x: () => serviceSection.scrollWidth * -1,
          xPercent: 100,
          scrollTrigger: {
            trigger: '.service-block',
            start: '0% 20%',
            end: '+=2000px 10%',
            pin: serviceWrapper.current,
            scrub: 0.5,
            invalidateOnRefresh: true,
            // markers: true,
          },
        });
      }, serviceWrapper.current);

      return () => ctx.revert();
    }
  }, []);

 

 

Thank You

See the Pen MWRGqwm by akashrwx (@akashrwx) on CodePen

[Custom cursor with gsap with horizontal scroll]

I am really feeling dumb right now. Thanks alot for your help

[Custom cursor with gsap with horizontal scroll]

Hey Guys,

 

I am trying to create a custom cursor with gsap. My site is horizontal scroll based as you can see in the codepen demo. The problem is whenever I am scrolling the cursor also moves up.

 

How can i stop this from happening and make it behave just like a normal cursor.

 

I am working in Next JS with the cursor being a separate component.

 

Please help me.

 

Thanks alot

See the Pen rNRZWxx by akashrwx (@akashrwx) on CodePen

[Animate Sticky elemets as they reveal]

Thanks alot. This is exactly what i was looking for

[Animate Sticky elemets as they reveal]

Hey,

 

The effect I am trying to achieve is when the next image start revealing on scroll it should fade in from 0 - 1.

 

Thanks

[Animate Sticky elemets as they reveal]

Hey Guys,

 

I am trying to build an animation where the children elements have position sticky with bottom:0 set. I want to add autoAlpha on each child as they scroll down and settle on their respective places.

 

I have created a minimal pen for it on what I have tried. I also tried gsap.utils to array method but it still not work. Can you please help me.

 

If there is any way that I can achieve this effect without using position sticky that too I can consider.

 

Thanks alot

See the Pen LYapKNX by akashrwx (@akashrwx) on CodePen

[Falling objects and collecting them in its container]

Hi,

 

I am trying to achieve the effect using GSAP physics plugin in which the objects fall from the sky and collect on the ground and does not stack on each other instead they collide.

 

Please help me

See the Pen BaMqYJR by akashrwx (@akashrwx) on CodePen

[Horizontal scroll with sticky section]

Hi @Rodrigo,

 

This is exactly what i was looking for. Thanks alot for this. The only problem is what if I need multiple stops?

[Horizontal scroll with sticky section]

Yes I understand that the animation is key but the problem I am facing is that I don't want all the panels to stick while their inner animations are playing. I want a smooth horizontal scroll with stops only at panels which I want.

 

Currently the entire panel 2 sticks while the inner content animations are playing.

 

At the start I took refernce from this codepen provided by @Cassie in another post.

 

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

 

 

 

[Horizontal scroll with sticky section]

Hey,

 

This is what I tried.

 

See the Pen wvQjoYG by akashrwx (@akashrwx) on CodePen

 

I am using multiple scroll trigger to have a more precise control on start and end points as I have many animations between the panels

[Horizontal scroll with sticky section]

I tried to add it to the timeline but i want the animation to go on as the previous animation is running. For example when the first 2 slides are moving i want the box in the second slide to move to with them. But in my case it is working after the panel animation is completed

[Horizontal scroll with sticky section]

Hey @mvaneijgen,

 

Thanks a lot for the reply. Sorry I was unable to provide forked codepen as I was experimenting in my VScode only. I created this simple demo just for this forum.

 

I tried the above solution but there are many animations inside those sections which animate as i scroll. I used containerAnimation for that but after implementing this solution the animations have stopped working

 gsap.to('.v-text-1', {
      yPercent: -50,
      duration: 2,
      ease: 'linear',
      scrollTrigger: {
        trigger: '.vertical-text-wrapper',
        containerAnimation: scrollTween,
        start: '60% 100%',
        end: '140% 0%',
        markers: true,
        scrub: 0.5,
        id: '1',
      },
    })

Can you please help me with this

 

See the Pen bGQMwaz by akashrwx (@akashrwx) on CodePen

[Horizontal scroll with sticky section]

Hi,

 

I am building a website with horizontal scroll. I have a requirement to stick one section and scroll to bottom which has content more than the viewport height (Grey section in the example codepen).

 

I tried a few ways but it is not working as expected. Please help me.

 

Thank you

See the Pen eYQrJLZ by akashrwx (@akashrwx) on CodePen

[Jumping element]

I really feel stupid after finding this solution. Thanks alot for the help Jack

[Jumping element]

Here is the codepen demo but I am unable to replicate this issue in codepen because codepen always refreshes from the top of the page. My issue comes when the page refresh from the middle of the web page.

 

See the Pen gOBJQLB by akashrwx (@akashrwx) on CodePen

 

I can show the issue in a video though

 

https://drive.google.com/file/d/1YXcZN7psGlehMvishH5_RaxUtmceS4V4/view?usp=sharing

 

As you can see the LASER text animates on page load and goes down after scroll. But after we reach the mid of the web page and refresh the page and if the browser keeps the user at the same point and then we scroll up the LASER text stays there and hides and never shows again.

[Jumping element]

Hi,

 

I am trying to do animation on one element with gsap.fromTo and then later control that animation in a timeline with scrollTrigger. But the issue is that whenever I refresh the page and the page refreshes and show the content from middle on the webpage then the gsap.fromTo animation runs which it should not. Below is my code for better understanding.

 

As you can see If the page reloads from middle then the .h1-text should not be visible if we scroll up but it is showing because of that gsap.fromTo animation.

 

Please help me in fixing the issue

 

  gsap.fromTo(
      '.h1-text',

      {
        autoAlpha: 0,
        yPercent: 100,
      },

      {
        autoAlpha: 1,
        yPercent: 0,
        duration: 1,
        ease: 'power2.out',
      }
    )


 let LaserHeroTl = gsap.timeline({
      ease: 'power2.out',
      scrollTrigger: {
        trigger: laserHeroContainer.current,
        // markers: true,
        start: '10% 25%',
        end: '75% 10%',
        scrub: 0.6,
      },
    })

    LaserHeroTl.fromTo(
      '.satelite-1',
      {
        transform: 'rotate3d(1, 1, 1, 15deg)',
      },
      {
        transform: 'rotate3d(1, 1, 1, -10deg)',
        duration: 1,
        ease: 'power2.out',
      }
    )
      .to(
        '.h1-text',

        {
          yPercent: 100,
          opacity: 0,
          duration: 0.4,
          ease: 'power2.out',
        },
        '-=0.4'
      )

Thanks

[SplitText not animating with scrolltrigger]

Thanks alot @Cassie for the help. I used timeline and it is working fine. You are awesome

[SplitText not animating with scrolltrigger]

Yes it is working but partially.  I have updated the same codepen. The issue is I am using 2 fromTo tween on same element. One for making it appear and another for making it disappear after a while.

 

But the problem is that the text is visible on first scroll which I don't want.

[SplitText not animating with scrolltrigger]

Hi @Cassie,

 

Thanks alot for pointing out the issue. I have update all of them to a fromTo tween and added toggle actions so that they play again when entering back. Do you have any suggestions how I can improve this?

gsap.fromTo(
      weakRouterWordsTwo,
      {
        autoAlpha: 0,
        y: 90,
      },
      {
        duration: 0.5,
        autoAlpha: 1,
        y: 0,
        ease: 'power2.out',
        stagger: 0.1,
        scrollTrigger: {
          trigger: weakRouterSection.current,
          // markers: true,
          start: '18% 30%',
          end: '25% 25%',
          toggleActions: 'play none reverse none',
        },
      }
    )
    gsap.fromTo(
      weakRouterWordsTwo,
      {
        opacity: 1,
        y: 0,
      },
      {
        duration: 0.5,
        opacity: 0,
        y: -90,
        ease: 'power2.out',
        stagger: 0.1,
        scrollTrigger: {
          trigger: weakRouterSection.current,
          // markers: true,
          start: '40% 30%',
          end: '45% 25%',
          toggleActions: 'play none reverse none',
        },
      }
    )

 

[SplitText not animating with scrolltrigger]

Hi,

 

I am trying to animate multiple split text animations in a timeline with scrollTrigger. But it is not working as expected. The text appears instantly without animating.

 

The animation works fine when adding scrub property though.

 

Please help me.

 

Thanks

See the Pen NWOaPeG by akashrwx (@akashrwx) on CodePen

[Reverse ScrollTrigger animation when reacing end point]

Thanks @Cassie this worked fine. I tried many ways but did not know that I can do it this way also. Many thanks

[Reverse ScrollTrigger animation when reacing end point]

Hi,

 

I am trying to achieve an effect where the font size increases as the animation progresses (like just what scrub do) and decreases as the font size of next element increases. But i am unable to achieve this effect with SCRUB property.

 

I tried many methods but i am not sure how to achieve it. Can you guys please help me.

 

Thanks alot.

See the Pen mdjLbOa by akashrwx (@akashrwx) on CodePen

[Animate same element multiiple times with scrollTrigger]

Thanks for the insight @alig01.

 

Just one confusion though. So suppose if I put everything in a timeline like you mentioned should I add delay if I want that element to stay a little longer once it has appeared because currently I am using different scrolltrigger values to trigger the animation.

 

Thanks

[Animate same element multiiple times with scrollTrigger]

Hello,

 

I want to animate single element multiple times with scrollTrigger. I am using fromTo method everytime I animate. I want to know if this is the right way to do so or there is a better way to do this.

 

Please see codepen for reference

 

Thanks alot

See the Pen OJEVpVK by akashrwx (@akashrwx) on CodePen