[ScrollTrigger pin breaks on page rsize]

On 4/7/2022 at 12:04 AM, OSUblake said:

If you really need it right now to continue working, just include this file in your project and import from that file instead of GSAP. 

 

https://assets.codepen.io/16327/ScrollTrigger.min.js?v=3.10.3b 

 

Well post back here when the next version is released.

Hello @OSUblake, I upgraded to gsap 3.11.1, but I still see this problem, loading the page with the scroll restored by the browser breaks the pins, loading the page 'from the top position' works though, can you tell me if this fix is included in this new version? we are in the process of releasing a project and I would like to pin to an official version. thanks!

Davide

[Toggleclass on elements entering viewport with Scrolltrigger]

28 minutes ago, akapowl said:

You can use toggleClass as an object and define the targets as well as the className to be toggled.

 

• Object - To toggle a class for elements other than just the trigger, use the object syntax like toggleClass: {targets: ".my-selector", className: "active"}. The "targets" can be selector text, a direct reference to an element, or an Array of elements.

 

https://greensock.com/docs/v3/Plugins/ScrollTrigger

 

completely missed that, it works

 

thanks

[Toggleclass on elements entering viewport with Scrolltrigger]

how can you toggle a class on a different element? like here for example on this.btn and not on the trigger element this.el, is this the best possible solution?

 

gsap.to(
      this.btn,
      {
        scrollTrigger: {
          trigger: this.el,
          start: () => '-=150px',
          onEnter: () => this.btn.classList.add('active'),
          onEnterBack: () => this.btn.classList.add('active'),
          onLeave: () => this.btn.classList.remove('active'),
          onLeaveBack: () => this.btn.classList.remove('active'),
          end: () => '+=' + this.el.parentElement.getBoundingClientRect().height
        }
      }
    )

 

[ScrollSmoother features]

Hello,

we are testing scrollsmoother and for now it's working very well, will this ever support searching into the page (ctrl+f) ?

 

thanks!

[ScrollTrigger pin breaks on page rsize]

1 minute ago, GreenSock said:

That should be resolved now - one variable needed tweaking

awesome! is there an easy way to pull the new version through npm?

[ScrollTrigger pin breaks on page rsize]

Hello Jack, it seems so!

another thing I'm facing is that if the initial scroll position is past the pin it doesn't initialize correctly, for now I'm working around that with   window.onbeforeunload = function () {
          window.scrollTo(0, 0);
   }

 

could that be related? I don't have time for a POC until tomorrow, is something you can test in other way or have a 'template' for this test?

thank for now!

[ScrollTrigger pin breaks on page rsize]

Hello, in the given example, on firefox, if I resize the window the pin breaks and goes all over the place, is there a way to fix that?

See the Pen qBdzqmR by GreenSock (@GreenSock) on CodePen

[Animation stops on chrome]

Hello @ZachSaucier thanks for the reply, I just noticed a wrong selector for the displacement map, this is an updated pen and probably now it works,

See the Pen abbWdry by drc0 (@drc0) on CodePen

sorry and thanks again!

 

[Animation stops on chrome]

Hello,

I'm trying to recreate this effect https://tympanus.net/Development/DistortedButtonEffects/ (example button 8 https://github.com/codrops/DistortedButtonEffects/blob/e45285afb2a3a8b4cb31fe6c0c069880f17c05d2/js/main.js#L306 ) for a custom app, in chrome the animations stops midway and I don't know why.

Can anyone figure out what is going on?

 

thanks

See the Pen rNNyQBZ by drc0 (@drc0) on CodePen