Hi, @akapowl it seems your solution working here, thanks for your solution 👍... on other hand on ajax page load killing scroll and handling timer bit more work to do 😅...
Ater reading some more documantation i found that, adding ScrollTrigger.refresh(true); on main timeline function revealItemsOnScroll(); resolved the issue simply. so main function changed to:
function revealItemsOnScroll(){
if ( jQuery("#content .item").length ) {
var revealItems = gsap.utils.toArray('#content .item');
revealItems.forEach( function(revealItem, index){
var singleImage = revealItem.querySelector("div > img");
var singleTitle = revealItem.querySelector("h2 > span");
var pageElement = gsap.timeline();
ScrollTrigger.refresh(true);
if( typeof(singleImage) != 'undefined' && singleImage != null ){
pageElement.to( singleImage, {
scrollTrigger: {
trigger: singleImage,
end: 'bottom top',
start: 'top bottom',
markers: true
onEnter: () => { singleImage.classList.add("active"); },
onLeaveBack: () => { singleImage.classList.remove("active"); },
}
});
}
if( typeof(singleTitle) != 'undefined' && singleTitle != null ){
pageElement.to( singleTitle, {
scrollTrigger: {
trigger: singleTitle,
end: 'bottom top',
start: 'top 90%',
markers: {startColor: "blue", endColor: "lime"},
onEnter: () => { singleTitle.classList.add("active"); },
onLeaveBack: () => { singleTitle.classList.remove("active"); }
}
});
}
});
}
}
I have also updated the codepane and it seems now working:
See the Pen OJXaamP by aboutzahurul (@aboutzahurul) on CodePen
on my live code its also working fine, will check if there any more issue or not... now my next goal to add smooth scroll into it, i am trying to follow this codepen:
See the Pen 89f1e24fbc30e59edbc186a4c961f35c by osublake (@osublake) on CodePen
let me know if you guys have any suggession....
Thanks you guys, very happy to see your quick respons 👍
