Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

ZenithLai

Members
  • Posts

    16
  • Joined

  • Last visited

Posts posted by ZenithLai

  1. It is work! 😀

    On 5/16/2021 at 4:21 AM, GreenSock said:

    If I understand your question correctly, the issue is that you've got stacked elements, thus when the browser goes to #Section02 it's at exactly the same spot as #Section03. Open Dev Tools and inspect the DOM and you'll see what I mean. 

     

    So to work around that, you could record the scroll offsets when the page is scrolled all the way up (0) and then manually handle the scroll to those positions like this: 

    
    
    const navLinks = gsap.utils.toArray(".wrap-nav a");
    
    navLinks.forEach(el => {
      el.addEventListener("click", e => {
        e.preventDefault(); // don't jump there. We'll handle it with a tween
        gsap.to(window, {scrollTo: el.scrollPosition, duration: 0.3});
      });
    });
    
    // re-record on each refresh so that it's responsive (works afte screen resizes)
    ScrollTrigger.addEventListener("refresh", () => {
      // make sure we're scrolled all the way up (0). We do this with a tween so that we can rewind it back to 0 after we're done measuring. It'll be invisible to the user because we immediately jumpo to the end anyway, then rewind to the start and kill. 
      const revertTween = gsap.to(window, {scrollTo: 0}).progress(1);
      navLinks.forEach(el => {
        el.scrollPosition = ScrollToPlugin.getOffset(el.getAttribute("href")).y;
      });
      revertTween.progress(0).kill();
    });

     

    Here's a fork:

     

     

     

    Does that help?

     

  2. Hi!

     

    I still unable to fix it.

    What I expect is when mobile view, the two section( section 2 & 3 ) is separate.

    Here is what i expect in mobile view

    Untitled-1.jpg.10634ebd43a3be125cf5d3e7ee8b733d.jpg

     

    In mobile view I have to separate is because I concern that my content fit into mobile screen view, so that I let user to continue scroll down.

    ( *Sorry, my english not very good, hope u understand)

    Thanks.

     

  3. Hi,

     

    Here is my latest code update:

    See the Pen VwPGPYv by zenithlai (@zenithlai) on CodePen

     

    What's is the reason that I want to break all scrolltrigger, is because when mobile view user unable view all content in the screen, so i propose to break all the scrolltrigger to become default scrolling.

     

    I have try your way, but still fail to do, did I do anything wrong? Please advise. Thanks.

     

  4. Hi,

     

    I'm newbie for GSAP.

    When mobile size I'm trying to remove all ScrollTrigger. I already read all about .kill() document but I have no idea how to start.

    Here is what I write in my website.

     

    ScrollTrigger.matchMedia({
        

      // mobile
      "(max-width: 768px)": function() {
          tl.scrollTrigger.kill();
          pinner.scrollTrigger.kill();
          
      },
    });     

     

    Do you guys have any idea on how i should write on the code part ?

    Appreciate if you can advice. Thanks

    See the Pen VwPGPYv by zenithlai (@zenithlai) on CodePen

  5. This is what I want! :)

     

    But is they anyway to let the content auto calculate the content height? instead of set the height?

    .philosophie,
    .philosophie .wrapper {
      height: 50vh;
      width: 100%;
    }
    .philosophie .point {
      height: 50vh;
      width: 100%;
      display: flex;
      align-items: center;
      padding: 4rem;
      outline: 1px solid red
    }
  6. It is works! Thank you.

     

    I have one more question.

    There is only little content for the section, thus I would like the content and image to appear once i scroll down from previous section instead of middle of the screen. And the following section appear right after the scrolling part end. 

    See the Pen GRrMoxB by zenithlai (@zenithlai) on CodePen

     

    Untitled-1.thumb.jpg.fe647eb0220291d43af9a02e9a324c0f.jpgThanks!

  7. Hi,

    Would like to seek for you guys advice. Currently im working on the animation development for one of my website section. However, I would like the image to come out in "fade in" & "fade out" mode instead of scrolling up and down. 

     

    Do you guys have any idea on how i should write on the code part ?

    Appreciate if you can advice :)

     

    Thanks !

    See the Pen GRrMoxB by zenithlai (@zenithlai) on CodePen

×