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,
});