Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

Zahurul

Members
  • Posts

    10
  • Joined

  • Last visited

Community Answers

  1. Zahurul's post in GSAP/ScrollTigger reload on DOM change/update/replaced by ajax call was marked as the answer   
    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 👍
     
    Cheers,
    Zahurul
×