Jump to content
Search Community

jacob.liu

Members

  • Posts

    11

  • Joined

  • Last visited

 Content Type 

Posts posted by jacob.liu

    How to start scroll Trigger entering the certain component.

    in GSAP

    Posted

    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?

    How to start scroll Trigger entering the certain component.

    in GSAP

    Posted

    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.

    How to start scroll Trigger entering the certain component.

    in GSAP

    Posted

    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 = 0; idx < stepCount; idx++) {
          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'),
          })
        }

    How to start scroll Trigger entering the certain component.

    in GSAP

    Posted 

    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?

    old state isn't saved in ScrollTrigger React

    in GSAP

    Posted

    const setStoryContent = (sectionId) => {
        console.log("old description:", description, "------------------------new description: ", data.story[sectionId].description);
        setDescription(data.story[sectionId].description);
      };
     
    //create scroll triggers for text panels
          ScrollTrigger.create({
            trigger: container,
            start: descStPx[idx] === 0 ? "top top" : descStPx[idx],
            end: "+=" + steps.length * PXS_PER_STEP,
            onEnter: () => setStoryContent(idx),
          });
     
     
    ideally, console should be
    "A", "B"
    "B", "C"
    "C", "D"
     
    but current console log shows
    "A", "B"
    "A", "C"
    "A", "D"
     
    old description doesn't update,,, what's the issue?
     
     

    Looking for a freelance help for Scroll Trigger Trick

    in Jobs & Freelance

    Posted

    Hi, I need to switch content by scrolling.

     

    [ALD-2-distance line- ], [ALD-2-distance-text]  [ALD-2-traced-image]

     

    Radiological zoning from 1970. Gambier Islands located 273km from the test sites are placed just outside the limits of the so-called danger zone, as if it is possible to determine precisely through a straight line how the wind and nuclear fallout would behave.

     

    [ALD-2-dz-atolls]  [ALD-2-traced-image] 

    [ ALD-2-dzone1] [ALD-2-dzone1-area] [ALD-2-dzone2] [ALD-2-dzone2-area]

    Tureia and Tematangi atolls – both with small populations – are too close to the test sites to be excluded from the danger zone like Gambier islands. However these are not the only islands within the danger zone where local people lived. Another 300 people temporarily inhabited Maruteia and surrounding atolls. Some of these atolls have houses where polynesians temporarily stay or are used for coconut plantations, fishing and nacre (mother of pearl) cultured pearl farming. However, these atolls were registered as simply uninhabited n the official french documents.

     

    Each text paragraph explains map.  These are names of may layers: [ALD-2-distance line- ], [ALD-2-distance-text]  [ALD-2-traced-image]

    I have logic to transition map layers but don't know how to interactive with scrolling.

     

    Text paragraph is placed in the left top and mapbox is full screen. When I scroll down or up, each map layer changes and text paragraph should be sticky.

     

    Scroll down. [ALD-2-distance line- ]  disappear, [ALD-2-distance-text] disappear, [ALD-2-traced-image] appear

    Scroll up: reverse above actions

    Text panel: Radiological zoning from 1970. Gambier Islands located 273km from the test sites are placed just outside the limits of the so-called danger zone, as if it is possible to determine precisely through a straight line how the wind and nuclear fallout would behave.

     

    During these 3 scrolls, text panel is sticky in the left-top.

     

     

    Text paragraph is placed in the left top and mapbox is full screen. When I scroll down or up, each map layer changes and text paragraph should be sticky.

     

    Scroll down. [ALD-2-distance line- ]  disappear, [ALD-2-distance-text] disappear, [ALD-2-traced-image] appear

    Scroll up: reverse above actions

    Text panel: Radiological zoning from 1970. Gambier Islands located 273km from the test sites are placed just outside the limits of the so-called danger zone, as if it is possible to determine precisely through a straight line how the wind and nuclear fallout would behave.

     

    During these 3 scrolls, text panel is sticky in the left-top.

     

     

    It repeats again and again.

     

     

    Please submit the abstract solution and reach out my email: spring.scene@hotmail.com   or   alexgreat609520@gmail.com

    image.png

×
×
  • Create New...