Jump to content
Search Community

How to start scroll Trigger entering the certain component.

jacob.liu test
Moderator Tag

Recommended Posts

for (let idx = 0; idx < stepCount; idx++) {
      if (idx === 0) {
        mapStPt[0] = 0;
        mapEnPt[0] = 0 + PXS_PER_IMAGE;
      } else {
        mapStPt[idx] = mapEnPt[idx - 1];
        mapEnPt[idx] = mapStPt[idx] + PXS_PER_IMAGE;
      }

      ScrollTrigger.create({
        trigger: container,
        start: mapStPt[idx] === 0 ? "top top" : mapStPt[idx],
        end: "+=" + PXS_PER_IMAGE,
        onEnter: () => setMapContent(idx + 1, "DOWN"),
        onLeaveBack: () => setMapContent(idx + 1, "UP"),
        markers: true,
      });
    }

I have several components in the one page.

 

1st

2nd

3rd : need scroll trigger

4th

 

I need to handle scroll trigger in 3rd component but scroll trigger acts in whole page. Above code snippet is defined in 3rd component.

 

When I enter 3rd, all scroll events have already executed in 1st, 2nd. How should I limit scroll trigger in certain component?

Link to comment
Share on other sites

Hello, here is the loom what I am looking for : https://www.loom.com/share/8b9350ed625d407799dbd6fcf44ee805

 

I am handling mapbox layer transitions by scroll trigger from GSAP.  I manually calculated starting point of 3rd component but it's not precise.

As you can see, first layer should appear when the first text panel appear but it's not synchronized.

 

Here is the link. Sorry you should wait a few mins to load video, you should scroll down until the video mode ends.

https://moruroa-files.org/investigation/nuclear-reconstruction#ALDEBARAN

email: "interprt.docs@gmail.com",
password: "Aldebaran1966",

 

for (let idx = 0idx < stepCountidx++) {
      if (idx === 0) {
        mapStPt[0= stScrollPos
        mapEnPt[0= stScrollPos + PXS_PER_IMAGE
      } else {
        mapStPt[idx= mapEnPt[idx - 1]
        mapEnPt[idx= mapStPt[idx+ PXS_PER_IMAGE
      }
 
      ScrollTrigger.create({
        trigger: container,
        start: mapStPt[idx=== 0 ? 'top top' : mapStPt[idx],
        end: '+=' + PXS_PER_IMAGE,
        onEnter: () => setMapContent(idx + 1'DOWN'),
        onLeaveBack: () => setMapContent(idx + 1'UP'),
      })
    }
Link to comment
Share on other sites

3 hours ago, GreenSock said:

Hey @jacob.liu. I read your question a few times and I'm still completely lost, sorry. Can you please provide a minimal demo, like in CodePen or CodeSandbox with only the absolutely essential code to show the issue in context? That'll exponentially increase your chances of getting a solution :)

 

I am really frustrated due to deadline is 9th 7AM CET. Here is my email: spring.scene@hotmail.com

Can you speak with me directly? Thanks.

Link to comment
Share on other sites

5 hours ago, jacob.liu said:

Can you speak with me directly?

Sorry, we're not able to do that for free. Perhaps you'd do better to pay someone to help you. We have a jobs & freelance forum where you could post about it if it's that pressing.

 

If you'd like additional help in this forum, as Jack requested, please follow our guidelines and create a minimal demo of the issue for us to look at.

Link to comment
Share on other sites

3 minutes ago, ZachSaucier said:

Sorry, we're not able to do that for free. Perhaps you'd do better to pay someone to help you. We have a jobs & freelance forum where you could post about it if it's that pressing.

 

If you'd like additional help in this forum, as Jack requested, please follow our guidelines and create a minimal demo of the issue for us to look at.

Hello, I can do payment. But no need more time to write job details on forum again. Can you help or introduce dev for me?

Link to comment
Share on other sites

2 minutes ago, jacob.liu said:

no need more time to write job details on forum again. Can you help or introduce dev for me?

Sorry, I don't have the availability for that right now. As I said, you can try in the job forum if you'd like to. Otherwise I'm afraid I can't be of service in terms of finding you someone.

Link to comment
Share on other sites

We're happy to answer GSAP-specific questions in the forums, especially when there is a minimal demo provided but unfortunately we don't have the resources to offer free consulting services for building a whole experience or troubleshooting a live site. As I see it, you have the following options:

  1. Isolate your issue in a minimal demo, perhaps in CodePen or CodeSandbox, and post a GSAP-specific question in these forums. There's no cost for this - we do our best to help our users, even when they haven't purchased a Club GreenSock membership to support our efforts. 
  2. Find a freelancer to help you. Maybe post in our Jobs & Freelance forum. This may take some time to find, and your results may vary in terms of getting qualified candidates. 
  3. Contact GreenSock directly and try to schedule time for us to do some consulting work for you. This is not inexpensive, and we have a minimum fee that equates to 4 hours of our time (hourly rate) but of course you probably won't find anyone more qualified to work with the tools and deliver an answer so hopefully you'd find it well worth the $. We cannot, however, drop everything we're doing to rush your job immediately. We'd do our best to find a spot in our schedule as soon as possible, though. 

Good luck with the project, @jacob.liu

  • Like 2
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...