ZenithLai

Hello,

How can I make the animation is when scroll until the certain section, then only the bar slowly rise up with the counting number.

Thank you

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

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?

any code is when I click navigation bar > click section 2 then force land on section 2? 

Hi,

When I view entire website. Then I click navigation page, and choose (section 2), then it will land on section 3,

any solution to fix it?

Thanks

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

Why u delete all JS script? then how about in desktop view?

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)

Thanks.

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.

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

It is work! Very helpful.

Thanks a lot.

Hi,

I'm trying to add button on each section. I realise that the "Section 1" button unable to click, "Section 2" able to click.

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

Appreciate if you can advice

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

I have follow your suggestion.

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

But now I facing responsive issue, when I resize the image cant't fit in the white background section.

Have any idea on how i should write on responsive ?

Appreciate if you can advice.

*Sorry, I'm newbie for greensock, not familiar with this.

Thanks

Hi,

Can u please share me some example, so I can refer.

Thanks

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
}

Hi,

This is what my side view.

Because my website only little content for that section, thus can I reduce the spacing between top and bottom? And the following section appear right after the scrolling part end. 

Thanks!

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

Thanks!

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