Hi Rodrigo,
Re-Iteration: Main problem is the incorrect position of the triggers' top and bottom markers. It should be aligned with the triggers' top and bottom edge instead of the documents/<body></body> top and bottom edge.
Answers
window.addEventListener(
"load",
function (e) {
init();
setInterval(function () {
ScrollTrigger.refresh();
}, 100);
},
false
);
Purpose: To refresh scrollTrigger coordinates due to layout-shift caused by images, fonts, and etc. (Assuming that these things causes an issue).
Reference topic:
Note: This is just an experiment since I don't have a specific condition to refresh scrollTrigger. However, this seems not to be a problem caused by layout shift.
Update: Removed.
===
gsap.fromTo(
".services-content-heading-inner",
{
yPercent: 100
},
{
yPercent: 0,
autoAlpha: 1,
duration: 2,
ease: easeInOut
}
);
Purpose: To simply animate the ".services-content-heading-inner" element.
===
ScrollTrigger.create({
target: ".services-content-heading-inner",
start: "top top",
end: "bottom bottom",
markers: true
});
Purpose: To animate the ".services-content-heading-inner" element once it is in viewport.
Note: ".services-content-heading-inner" scrollTrigger; I separated this from the animation itself to test if it will solve the triggers' start/end markers incorrect positioning. However, problem still insists which means it is not a issue with the animation.
Update: Merged to corresponding animation above.
===
ScrollTrigger.create({
start: 0,
end: "max",
onUpdate: updateValues
});
Note: The idea is to identify the distance of ".services-content-heading-inner" top edge from the top of the viewport and if the ".services-content-heading-inner" is in viewport (true/false). Got it from this demo, https://codepen.io/GreenSock/pen/WNOzrqg
Update: Removed.
I apologize, for the confusing code. I have removed all the unnecessary lines and cleaned it up for you.
Let me know if you have further questions.
