Timeline starts before scrolltrigger

[TheChris]

Hello,

 

I created a counter animation using GSAP, but I'm experiencing an issue where the animation starts before the 'div' with the '[data-counter]' attribute comes into view. Can someone provide some insight into this problem?

 

function dataCounter() {

const numbers = document.querySelectorAll('[data-counter]');

 

var tl = gsap.timeline({

scrollTrigger: {

trigger: numbers,

start: '100%',

markers: true,

toggleActions: 'play none none none',

},

});

 

function animateCounter(elements, decimalPlaces) {

elements.forEach(function (el) {

const targetValue = parseFloat(el.getAttribute('data-target'));

var target = { val: 0 };

tl.to(target, {

val: targetValue,

duration: 1,

onUpdate: function () {

el.innerText = target.val.toFixed(decimalPlaces);

},

});

});

}

 

const counterOneElements = document.querySelectorAll('[data-counter="counterOne"]');

const counterTwoElements = document.querySelectorAll('[data-counter="counterTwo"]');

const counterThreeElements = document.querySelectorAll('[data-counter="counterThree"]');

 

animateCounter(counterOneElements, 0);

animateCounter(counterTwoElements, 0);

animateCounter(counterThreeElements, 1);

 

tl.play();

}

[mvaneijgen]

Hi @TheChris

 

I would take a look at your markers and see if they are where you expect them to be. Personally I like to write out my start and end properties, fully I know you can just use shorthand and ScrollTrigger will figure everything out for you, but I like to be in control of where everything starts and ends.

 

// What you have right now 
start: '100%',

// Change to 
start: "top top",
end: "bottom top",

 

This way you can easily change the position of all the markers, to get the desired effect. Due to there not being a minimal demo, it is really hard to debug what you are seeing, because you're providing just 1/3 of the code, CSS and HTML are really important when working with GSAP. 

 

I also find the tl.play() at the bottom of your script strange, you want  ScrollTrigger to handle all the playing of the timeline right, so that seems counter intuitive to just call .play() on the timeline manually.

 

If you could provide a minimal demo finding a solution will probably be trivial.

 

✨ A demo speaks 1000 words ✨
 

[TheChris]

Thanks for the fast reply, I tried your solution but sadly it didn't work. The markers start and end are being placed right before and after the div, so thats oke.

But the animation still starts when you're at the top of the page. I'll try to make a minimal demo.