Jump to content
Search Community

Scroll Trigger re-initialising issues

Rishi test
Moderator Tag

Recommended Posts

Hi GSAP Team,

I am new to the Scroll Trigger plugin and I am facing an issue with the same.  I am having a website wherein I have  triggered all the animations using Scroll Trigger and I have also used the rick callbacks now the issue that I am facing is If you are within a particular section and if you try refreshing the page then the scroll trigger animations are not re-initialising. For Example, if you are inside a section with the class name 'ABC' and then if you refresh the page the animations are not happening also the pinned element goes up somewhere hence the scrollbar is not recalculating the original position. Any solutions would be really appreciable.  I am also adding my stack overflow link for your guys to understand the situation https://stackoverflow.com/questions/64240035/gsap-3-scroll-trigger-on-leave-animation-reverse?noredirect=1#comment113659636_64240035 

Thanks. 

See the Pen wvWgBWM by c-baruah (@c-baruah) on CodePen

Edited by Rishi
I have added the codepen demo for scroll trigger
Link to comment
Share on other sites

Hi Team GSAP,

 

I have edited the previous post by creating a small code pen demo in order to explain the situation that I have been facing. Please check the code pen demo for a better understanding.  As I am new to Scroll Trigger please check my code  if I have done it in a proper way.  Basically what I am trying to achieve is the animations should be stable even when you load the page from within the section.  

Edited by Rishi
Link to comment
Share on other sites

Several things:

  • Why do you have a scrub? If you're just using the ScrollTrigger for the callbacks, there's no reason for scrub.
  • Why are you using an intersection observer? ScrollTrigger does everything that intersection observers can do and more so I don't know why you'd mix the two.
  • Your ScrollTrigger.refresh() code makes no sense. The only thing you can do with refresh is ScrollTrigger.refresh() - you can't pass in an object and expect it to do anything with it.
  • You're making one of the most common GSAP mistakes: recreating the same animations over and over. It is better to create the animations at the beginning and use control methods inside of your callbacks. I wrote more extensively about that topic in my article about animating efficiently.
  • Another common mistakes you're making is using translateX instead of just using x.
  • Another common mistake you're making is using the old GSAP syntax of using the second parameter of tweens for the duration. We highly recommend putting the duration inside of the vars parameter so you can make use of GSAP's defaults.
  • Your ScrollTrigger callbacks could be shortened. For example:
    // What you have
    onEnter: () => {
      manonEnter();
    }
    // What you could use instead
    onEnter: manonEnter

With all of that being said, I am unable to reproduce the issue using the pen that you provided. I exported the pen to local files using CodePen's export functionality. I tried scrolling to the end and then refreshing the page. Every time it moves the scroll position of the page towards the top and allows me to scroll into the section and play the ScrollTrigger as it should. Please modify your demo to recreate the issue that you're having if you'd like our help.

  • Like 1
Link to comment
Share on other sites

Hi @ZachSaucier,

 

Sorry for responding late. I have gone through all the above points and made some minor modifications in my code but now I am facing an issue if I remove the scroll trigger.refresh function and if I refresh the page from inside a particular section then the scroll trigger is not re-initialising. The section is getting overlapped with other sections and the animations are also not stable on refresh. Please help me to figure out exactly how to solve this issue. I am attaching a screenshot for you to understand. 

I am gonna also recreate the issue in my code-pen and update you asap in the meantime please refer the screenshot see how the section is getting overlapped with other section element.

 

Screenshot from 2020-10-26 12-23-52.png

Link to comment
Share on other sites

Hi @ZachSaucier,

 

I am facing another issue on Scroll Trigger. If I switch between responsive design modes for example if I inspect and change the view to a mobile device and vice versa then the animations are not triggering properly unless and until you refresh the page every time while changing the orientation.  Is there any way to tackle this issue. Scroll Trigger should re-initialised right without having to refresh the page every time you change orientation? Any help would be much appreciable. Thanks.

Link to comment
Share on other sites

Hi @ZachSaucier,

 

I have updated the code in the previous code-pen demo 

See the Pen wvWgBWM?editors=1010 by c-baruah (@c-baruah) on CodePen

 kindly have a look at it you should be able to figure out the issue. Animations are not fully stable when you resize the window.

Also, would like to ask you one more thing. I am trying to target an iPad and other tablets with the help of match media function but not able to figure out. I have used this function for an iPad but it seems there are issues. How will I be able to target tablet screens?  Any help would be much appreciable. Thank You.

"(min-width: 768px) and (max-width: 1024px)": () => {}
Link to comment
Share on other sites

That is not a minimal demo. Please strip down the demo to focus on a single section and the minimal amount of code necessary to reproduce the issue. It'd be best to create the same sort of issue using more simple elements (like just a colored square) so we don't have to be bothered with irrelevant code like the particular animations that you have on your page. 

 

Otherwise you could hire someone to try and debug all of your code. But unfortunately we don't have the capacity to do that for free in these forums.

Link to comment
Share on other sites

Hi @ZachSaucier,

 

I had stripped down  the unnecessary codes and kept only the once which will be helpful for you to debug. The code might look a little lengthier because I had to rewire the same animations inside the mobile match media function. Since I am very new to this scroll trigger functionality I would really be needing at least someone to help me figure out the issues. 

If not then at-least tell me how we are suppose to target an  iPad and other tablet screens using match media?

Kindly help me out I will appreciate your help.

 

See the Pen wvWgBWM?editors=0010 by c-baruah (@c-baruah) on CodePen

Link to comment
Share on other sites

8 minutes ago, Rishi said:

how we are suppose to target an  iPad and other tablet screens using match media?

That's probably not the question you should be asking. Touchscreens/tablets can be all sorts of screen sizes. Why do you think you need a media query just for iPads? If you're just wanting to target devices with a screen of a certain size, then create a media query that matches those screen sizes.

Link to comment
Share on other sites

Yes, I agree tablets can be all sorts of screen sizes. The issue that I am facing is if I use the match media function to target screen size within a specific range for example this one 

/******* match media for tablets ******/

"(min-width: 768px) and (max-width: 1024px)": () => {
// code goes here
}

then I am having some other issues like elements would be overlapping with one another on an iPad. 

Link to comment
Share on other sites

I'm guessing that the core of your issue is that you're using relative tweens and, when the media breakpoint is crossed, the old values are not cleared properly. You could fix that by either clearing them out properly, using .fromTo tweens instead, or by not using ScrollTrigger's matchMedia but instead using functional values instead.

Link to comment
Share on other sites

1 hour ago, Rishi said:

You had mentioned something about using functional values I did not understood that.

Instead of something like this (pseudo-code):

ScrollTrigger.matchMedia({
  "small-media-query": () => { ... },
  "large-media-query": () => { ... },
});

You could try doing something like this (pseudo-code):

tl.to(myElem, {
  x: () => isSmall ? smallVal : largeVal, // Do this for each property that changes between breakpoints
  scrollTrigger: { ... }
});

 

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.
×
×
  • Create New...