Jump to content
GreenSock

Akash Ranjan

Scrolltrigger animation not happening with transition

Recommended Posts

Hello Guys,

 

I am a newbie to this awesome scrolltrigger plugin.  I somehow managed to get it worked the way I wanted but I am stuck at the very last part. As you can check in the below example link the entire block shrinks and move on x axis at start and at the end I want it to come back to center and become the normal size but it is not happening smoothly. 

 

You can check live example here: 

 

https://algobulls.netlify.app/ecosystem-2/

 

Sorry I cant upload Codepen as I am not able to replicate entire thing there. I request you guys to please help me out. I will really appreciate it.

 

const sectionFirst = useRef()
  const mainIllustrationContainer = useRef()
  const firstHeading = useRef()
  const ecoCore = useRef()
  const ecoMarkets = useRef()
  const ecoOms = useRef()
  const ecoBrokers = useRef()
  const ecoclients = useRef()
  const ecoStrategist = useRef()
  const ecoChannelPartner = useRef()
  const ecoDataVendor = useRef()
  const videoBlock = useRef()
  const sectionSecond = useRef()
  const sectionThird = useRef()
  const sectionFourth = useRef()

  useEffect(() => {
    let tl = new TimelineMax()

    tl.fromTo(
      ecoCore.current,
      {
        autoAlpha: 0,
      },

      {
        scrollTrigger: {
          trigger: mainIllustrationContainer.current,
          start: "0 300",
          end: "center 100",
          scrub: true,
          //markers: true,
        },
        //y: 450,
        duration: 2,
        autoAlpha: 1,
        ease: "power2.out",
      }
    )

      .fromTo(
        firstHeading.current,
        {
          autoAlpha: 0,
          y: 0,
        },

        {
          scrollTrigger: {
            trigger: sectionFirst.current,
            start: "600 300",
            end: "800 150",
            // markers: true,
            scrub: true,
            pinSpacing: false,
          },
          //y: 450,
          duration: 3,
          autoAlpha: 1,
          y: -100,
          ease: "power2.out",
        }
      )
      .to(firstHeading.current, {
        scrollTrigger: {
          trigger: mainIllustrationContainer.current,
          start: "80% 300",
          end: "90% 100",
          // markers: true,
          scrub: true,
          pinSpacing: false,
        },
        //y: 450,
        duration: 1,
        scale: 0,
        ease: "power2.out",
      })

      .to(sectionFirst.current, {
        scrollTrigger: {
          trigger: mainIllustrationContainer.current,
          start: "0 0",
          endTrigger: videoBlock.current,
          end: "center center",
          // markers: true,
          pin: true,
          scrub: true,
          pinSpacing: false,
        },
        //y: 450,
        duration: 3,
        ease: "power2.out",
      })


    tl.fromTo(sectionFirst.current, 
      {
        scale:1,
        x: 0,
      },
      {
      scrollTrigger: {
        trigger: sectionSecond.current,
        start: "top-=400 300",
        end: "200 200",
        markers: true,
        scrub: true,
      },
      scale: 0.53,
      x: -290,
      duration: 3,
      ease: "power2.out",
    })

    
// this is the one which makes it scale 1 /////////

    .to(sectionFirst.current, {
      scrollTrigger: {
        trigger: "#data-vendor",
        start: "bottom+=150 300",
        end: "bottom+=250 150",
       // markers: true,
        scrub: true,
      },
      scale: 1,
      x: 0,
      duration: 3,
      ease: "power2.out",
    })

      tl.fromTo(
        ecoMarkets.current,
        {
          autoAlpha: 0,
          y: 300,
        },

        {
          scrollTrigger: {
            trigger: sectionSecond.current,
            start: "top 400",
            end: "200 100",
            //  markers: true,
            scrub: true,
          },
          y: 0,
          duration: 2,
          autoAlpha: 1,
          ease: "power2.out",
        }
      )
      .fromTo(
        ecoOms.current,
        {
          autoAlpha: 0,
          y: 300,
        },

        {
          scrollTrigger: {
            trigger: sectionThird.current,
            start: "-300 200",
            end: "-100 100",
            // markers: true,
            scrub: true,
          },
          y: 0,
          duration: 2,
          autoAlpha: 1,
          ease: "power2.out",
        }
      )
      .fromTo(
        ecoBrokers.current,
        {
          autoAlpha: 0,
          y: 300,
        },

        {
          scrollTrigger: {
            trigger: sectionFourth.current,
            start: "-300 200",
            end: "-100 100",
            // markers: true,
            scrub: true,
          },
          y: 0,
          duration: 2,
          autoAlpha: 1,
          ease: "power2.out",
        }
      )
      .fromTo(
        ecoclients.current,
        {
          autoAlpha: 0,
          y: 300,
        },

        {
          scrollTrigger: {
            trigger: "#clients",
            start: "-300 200",
            end: "-100 100",
            // markers: true,
            scrub: true,
          },
          y: 0,
          duration: 2,
          autoAlpha: 1,
          ease: "power2.out",
        }
      )
      .fromTo(
        ecoStrategist.current,
        {
          autoAlpha: 0,
          y: 300,
        },

        {
          scrollTrigger: {
            trigger: "#pro-strategist",
            start: "-300 200",
            end: "-100 100",
            // markers: true,
            scrub: true,
          },
          y: 0,
          duration: 2,
          autoAlpha: 1,
          ease: "power2.out",
        }
      )
      .fromTo(
        ecoChannelPartner.current,
        {
          autoAlpha: 0,
          y: 300,
        },

        {
          scrollTrigger: {
            trigger: "#channel-partner",
            start: "-300 200",
            end: "-100 100",
            // markers: true,
            scrub: true,
          },
          y: 0,
          duration: 2,
          autoAlpha: 1,
          ease: "power2.out",
        }
      )
      .fromTo(
        ecoDataVendor.current,
        {
          autoAlpha: 0,
          y: 300,
        },

        {
          scrollTrigger: {
            trigger: "#data-vendor",
            start: "-300 200",
            end: "-100 100",
            // markers: true,
            scrub: true,
          },
          y: 0,
          duration: 2,
          autoAlpha: 1,
          ease: "power2.out",
        }
      )
      .fromTo(
        '#eco-video',
        {
          autoAlpha: 0,
        },

        {
          scrollTrigger: {
            trigger: "#data-vendor",
            start: "bottom 200",
            end: "bottom+=200 100",
            // markers: true,
            scrub: true,
          },
          duration: 2,
          autoAlpha: 1,
          ease: "power2.out",
        }
      )
    
  }, [])

 

Link to comment
Share on other sites

Hi and welcome to the GreenSock forums.

 

Can you provide a reduced live sample showing just the issue that we can take a look at in Codesandbox? You can even deploy a Github repo if you want, which makes things simpler.

 

The issue is there but it's quite difficult to troubleshoot a live bundled app with just that snippet.

 

Happy Tweening!!!

  • Like 2
Link to comment
Share on other sites

Hello Rodrigo,

 

Thanks alot for the reply. I tried creating a codesandbox but it is giving me error dont know why.

 

However I have created this public repo in github. https://github.com/akashrwx/testbulls

 

Please see if this help. ☺️

Link to comment
Share on other sites

Hi,

 

Unfortunately that doesn't really helps. I assume that the code in question is in the index.js page, which is over a thousand lines of code.

 

Try creating a reduced sample in codesandbox using the React starter template, no need for all the gatsby stuff, just the relevant GSAP code that is giving you the issues. If you want you can simulate content by giving the container a fixed height in VH to have some scrolling space soto speak.

  • Like 3
Link to comment
Share on other sites

46 minutes ago, Rodrigo said:

Hi,

 

Unfortunately that doesn't really helps. I assume that the code in question is in the index.js page, which is over a thousand lines of code.

 

Try creating a reduced sample in codesandbox using the React starter template, no need for all the gatsby stuff, just the relevant GSAP code that is giving you the issues. If you want you can simulate content by giving the container a fixed height in VH to have some scrolling space soto speak.

Hi,

 

I tried creating my first codesandbox thanks to you I figured out how to do it.

 

https://codesandbox.io/s/test-gsap-template-mb6ns?file=/src/App.js

 

I hope this will help you solve my issue

 

 

  • Thanks 1
Link to comment
Share on other sites

Hi and thanks for the reduced sample, it definitely helped to identify the problem, great job!!!!

 

Basically the issue is that you have a few GSAP instances dealing with the same properties in your target element. What I saw was the element being scaled and positioned as expected and then BAM!!! the dreadful jump :D. This happened because another instance came to alter basically the same properties of your element. The problem is that when this instance is created during the useEffect hook, it takes the starting values the element has at that point and not the ones it will have once the animation is running. This is what you have now (I removed the scroll trigger and the next fromTo instance because those were not the cause of the issue):

tl.to(sectionFirst.current, {
  scale: 1,
  x: 0,
  duration: 3,
  ease: "power2.out"
});

When this instance is created sectionFirst has a scale of 1 and an x position of 0, which are the values GSAP stores in a lookup table for better performance, so when the timeline reaches this point it uses those values as the starting point and then updates them to the final values, which are the same, hence the jump.

 

Changing your code to this seems to do what you're trying to achieve:

tl.fromTo(sectionFirst.current, 
  {
    scale: 0.53,
    x: -290,
  },
  {
    scrollTrigger: {
      trigger: "#data-vendor",
      start: "bottom+=150 300",
      end: "bottom+=250 100",
      markers: true,
      scrub: true
    },
    scale: 1,
    x: 0,
    duration: 3,
    immediateRender: false,
    ease: "power2.out"
});

Once again I removed the final fromTo instance since that seems to work OK. Basically I replaced the to instance with a fromTo instance taking the values from the previous tween and setting the immediateRender to false in it, in order to prevent this from being enforced at the start of the very first timeline when the element is first visible.

 

Hopefully this makes sense and does what you're after.

 

Happy Tweening!!!

  • Like 1
Link to comment
Share on other sites

6 hours ago, Rodrigo said:

Hi and thanks for the reduced sample, it definitely helped to identify the problem, great job!!!!

 

Basically the issue is that you have a few GSAP instances dealing with the same properties in your target element. What I saw was the element being scaled and positioned as expected and then BAM!!! the dreadful jump :D. This happened because another instance came to alter basically the same properties of your element. The problem is that when this instance is created during the useEffect hook, it takes the starting values the element has at that point and not the ones it will have once the animation is running. This is what you have now (I removed the scroll trigger and the next fromTo instance because those were not the cause of the issue):


tl.to(sectionFirst.current, {
  scale: 1,
  x: 0,
  duration: 3,
  ease: "power2.out"
});

When this instance is created sectionFirst has a scale of 1 and an x position of 0, which are the values GSAP stores in a lookup table for better performance, so when the timeline reaches this point it uses those values as the starting point and then updates them to the final values, which are the same, hence the jump.

 

Changing your code to this seems to do what you're trying to achieve:


tl.fromTo(sectionFirst.current, 
  {
    scale: 0.53,
    x: -290,
  },
  {
    scrollTrigger: {
      trigger: "#data-vendor",
      start: "bottom+=150 300",
      end: "bottom+=250 100",
      markers: true,
      scrub: true
    },
    scale: 1,
    x: 0,
    duration: 3,
    immediateRender: false,
    ease: "power2.out"
});

Once again I removed the final fromTo instance since that seems to work OK. Basically I replaced the to instance with a fromTo instance taking the values from the previous tween and setting the immediateRender to false in it, in order to prevent this from being enforced at the start of the very first timeline when the element is first visible.

 

Hopefully this makes sense and does what you're after.

 

Happy Tweening!!!

Thanks you so much Rodrigo. 

 

This worked perfectly fine. Although I am facing a strange issue only on my local machine, i.e the start and end points of the elements does not seem to be at correct position at page load but if I resize my browser window or open browser's inspector they jump to their correct positions. This is not happening on live server that's why I am unable to replicate this.

 

Do you have any idea why this is happening. I think it is something to do with useEffect or react

 

 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×