[Problem using new scrollTrigger with smooth scroll]

Works great! Just leave the code here if someone have the same problem:
Note: using UIkit3 util classes ( UIkit.util.on ) for event listeners, use addEventListener instead.

util.on(prodCatBtn, 'click', function(){
  gsap.to(window, { duration: 0.35, delay: .35, scrollTo: { y: ".switcher-prod", offsetY: 140 }, ease: "power2.inOut", onComplete: function(){
    // refresh 
    ScrollTrigger.refresh();
  } });
});

Docs section: https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.refresh()

[Problem using new scrollTrigger with smooth scroll]

Seems that ScrollTrigger.refresh() does the job, i´m checking the docs...

Quote

Recalculates the positioning of all of the ScrollTriggers on the page which typically happens automatically when the window/scroller resizes but you can force it by calling ScrollTrigger.refresh(). For example, if you make changes to the DOM that would cause a reflow and position changes like expanding content.

This is just my case. I´m tying to apply it on the scrollto onComplete callback.

[Problem using new scrollTrigger with smooth scroll]

Hi there! I´m using the brand new Scroll Trigger plugin, it´s amazing!

But i´m having a problem using it with Smooth scroll: i have a link that scroll the page to some point, but after this scroll the Scroll Trigger markers move and the animation that should be triggered doesn´t start. If not scrolled, the script works as it should.

 

Here is the example with markers:  https://byhumans.works/area/cliente/roalca/

 

The bottom blue section have a countdown ( gsap timeline ) that is triggered once with Scroll Trigger. Click on buttons after "Nuestros Productos" title and you will see how the blue section with numbers below lost the trigger start point.

 

I have to do something else after i smooth scroll the page? if i use other script to scroll the page same thing happens.

 

This happens in all browsers, in pc, ipad and smartphone.

Thanks

 

My js:

// scroll on click category
var prodCatBtn = util.$$('.prod-cat-link');
// scroll
util.on(prodCatBtn, 'click', function(){
gsap.to(window, { duration: 0.35, delay: .35, scrollTo: { y: ".switcher-prod", offsetY: 140 }, ease: "power2.inOut" });
});

// top boxes animation

var counter1 = { var: 1950 };
var counter2 = { var: 0 };
var counter3 = { var: 0 };
var count1 = util.$(".number-1");
var count2 = util.$(".number-2");
var count3 = util.$(".number-3");
  
count1.innerHTML = counter1.var;
count2.innerHTML = counter2.var;
count3.innerHTML = counter3.var;
  
gsap.registerPlugin(ScrollTrigger);
  
// counter animation
var tl = gsap.timeline({ repeat: false, ease: "none" });
  
tl.to(counter1, {
var: 2004,
duration: 3,
onUpdate: function () {
count1.innerHTML = Math.ceil(counter1.var);
},
})
.to(counter2, {
var: 16,
duration: 3,
onUpdate: function () {
count2.innerHTML = Math.ceil(counter2.var);
},
}, "-=2")
.to(counter3, {
var: 160,
duration: 3,
onUpdate: function () {
count3.innerHTML = Math.ceil(counter3.var);
},
}, "-=2");


ScrollTrigger.create({
trigger: ".counter-wrap",
animation: tl,
toggleActions: "play pause resume pause",
start: "top bottom",
markers: true,
});