Jump to content


  • Posts

  • 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;


    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



    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)



  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.



      // mobile
      "(max-width: 768px)": function() {


    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 .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



  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