GSAP/ScrollTigger reload on DOM change/update/replaced by ajax call

[Zahurul]

Hi, I am new to GSAP and trying to reload GSAP/ScrollTigger on DOM #content element change, which can done by many ways, my case: jQuery("#content").load("/somePageURL #content") then the new content replace current page DOM content, and at this stage my code dont work.

 

On my code pen example  everything works fine on page load (not sure if its the correct way or not) but as if i change #content by calling jQuery("#content").load("/somePageURL #content"); and i replace current content and add custom jquery trigger jQuery(document).trigger('page.loaded',[link]);  so i can reload the main timeline function based on the custom trigger page.Loaded but it never load correctly and GSAP animation breaks, only it work if i reload the page on browser. sorry on my Codepen example i didn't added the ajax function to jQuery("#content").load(); cos i am not very expart on codepen but i hope you guys got the idea. On my newly replaced #content may have more .item element or less or empty so i tried to do some checks before i call GSAP timeline.

 

Current HTML:

<div id="content">
  <div class="item">
    <div class="img-box"><img src="https://via.placeholder.com/300x300?text=001" /></div>
    <h2><span>title1</span></h2>
  </div>
  <div class="item">
    <div class="img-box"><img src="https://via.placeholder.com/300x300?text=002" /></div>
    <h2><span>title2</span></h2>
  </div>
  <div class="item">
    <div class="img-box"><img src="https://via.placeholder.com/300x300?text=003" /></div>
    <h2><span>title3</span></h2>
  </div>
</div>

 

after jQuery("#content").load("/somePageURL #content"); call newly replaced HTML (#content) may be like this:

<div id="content">
  <div class="item">
    <h2><span>title1</span></h2>
  </div>
  <div class="item">
    <div class="img-box"><img src="https://via.placeholder.com/300x300?text=002" /></div>
  </div>
  <div class="item">
    <div class="img-box"><img src="https://via.placeholder.com/300x300?text=003" /></div>
    <h2><span>title3</span></h2>
  </div>
  <div class="item">
    <div class="img-box"><img src="https://via.placeholder.com/300x300?text=004" /></div>
    <h2><span>title4</span></h2>
  </div>
  <div class="item">
    <div class="img-box"><img src="https://via.placeholder.com/300x300?text=005" /></div>
  </div>
  <div class="item">
    <div class="img-box"><img src="https://via.placeholder.com/300x300?text=006" /></div>
    <h2><span>title6</span></h2>
  </div>
</div>

 

So now, how can i reload the scroll triggered animation correctly without reloading the page? Please help...

Thanks.

See the Pen bGeQKvy by aboutzahurul (@aboutzahurul) on CodePen

[akapowl]

 

Hey @Zahurul - welcome to the forums

 

2 hours ago, Zahurul said:

So now, how can i reload the scroll triggered animation correctly without reloading the page? Please help...

 

When/before loading that new content, you should probably first kill all the existing ScrollTriggers, something like this

 

let triggers = ScrollTrigger.getAll();
triggers.forEach( trigger => {			
	trigger.kill();
});

 

and after the new content has loaded, you could call that revealItemsOnScroll(); function you have there, again.

 

This way you make sure, that ScrollTrigger does not target any of the old elements, but only the new ones.

 

Hope this helps.

 

Cheers,

Paul

 

[Zahurul]

thanks  @76748-akapowl for your replay and for you suggestion, will try it...

i tried to recreate the issue differently in codepen by replace html but seems like working:

 

See the Pen OJXaamP by aboutzahurul (@aboutzahurul) on CodePen

 

but on my real code not working ?....  is it beacuse i load them by jquery(). load()? my actual load content code like below:

 

jQuery("#main-content").load( link + ' #main-content section', function( responseText, textStatus, jqXHR ){
  if( textStatus == 'success'){
    var pageTitle = jQuery(responseText).filter('title').text();
    //Letting browser to know new page loaded and added to browser history
    window.history.pushState( null, pageTitle, link );
    //setting browser title if current browsers don't support pushState title attribute
    document.title = pageTitle;
    //scrolling to top
    window.scrollTo(0,0);
    console.log( link, textStatus + ' (' + jqXHR.status + ')' );
    //Trigger custom events
    jQuery(document).trigger('page.loaded',[link]);
  }
  if( textStatus == 'error'){
    console.log( textStatus + ': ' + jqXHR.status + ' loading failed' );
  }
});

jQuery( window ).on("load page.loaded", function(e) {
  revealItemsOnScroll();
});

Is there something i am doing wrong?

Thanks

[akapowl]

18 minutes ago, Zahurul said:

Is there something i am doing wrong?

 

That seems to be more jquery related than anything with GSAP.

Can't tell you anything about that, sorry.

 

You really should kill the old ScrollTriggers though, before creating the new ones.

 

[Zahurul]

44 minutes ago, akapowl said:

That seems to be more jquery related than anything with GSAP.

Can't tell you anything about that, sorry.

 

sorry... yes page load handelled by jquery... I tried kill but no luck yet, still trying to resolve...

 

I just updated the codepen a bit so it switch content, you can see on content element change it seems working but if you see the markers and content height etc it still a bit mess, can anybuddy suggest?

 

See the Pen OJXaamP by aboutzahurul (@aboutzahurul) on CodePen

 

Thanks...

 

[akapowl]

On 11/11/2020 at 2:35 PM, Zahurul said:

if you see the markers and content height etc it still a bit mess, can anybuddy suggest?

 

The markers are messy, because you don't kill the old ScrollTriggers, as already mentioned.

 

See this example. The messiness of the markers resolves, when you kill the old ScrollTriggers.

 

 

See the Pen 877d506795b7336cfa47f0a063a085bc by akapowl (@akapowl) on CodePen

 

 

 

[Zahurul]

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

[Zahurul]

One interesting stuff learned today, if i need the trigger animation once, then setting "once: true" will do the job, no need killing or refresh, even from performance point its much efficient. good tips to know, i didn't know that...?