Load dynamically through ajax

[MZBS]

Hello,

 

I am creating an interactive map and for each item there is an animation with a modal with information (more than 30). I have an script like this:

 

$('.element_1').each( function(){
  $(this).wrap('<div class="wrapper">');
  $(this).parent().prepend('<span class="close"></span>');
  TweenMax.set( $(this).parent().find('.close') , {autoAlpha:0},'+=2' );
  this.tl = new TimelineMax({paused:true, onReverseComplete: removeActive, onReverseCompleteParams: [$(this)] });
  this.tl.to(".element-container_1", 0.8, {css:{marginLeft:60}, ease:Power2.easeOut});
  this.tl.to(".animacion", 0.8, {css:{marginLeft:-40}, ease:Power2.easeOut},'-=0.3');
  this.tl.to(".mapita img", 1, {right:"-900px", ease:Power2.easeInOut},'-=1.2');
  this.tl.to(".default-container", 0.8, {autoAlpha:0},'-=1.5');
  this.tl.to(".mapa-on", 0.8, {autoAlpha:0},'-=1');
  this.tl.to(".mapa-off", 0.8, {autoAlpha:1},'-=1.3');
  this.tl.to(".elements", 0.6, {autoAlpha:0},'-=1.4');
  this.tl.to(".active_element_1", 0.8, {autoAlpha:1},'-=0.5');
  this.tl.to(".animacion .video", 0.6, {autoAlpha:1},'-=0.7');
  
  $(this).click( function(){
    // Any others in active state should go back to inactive
    $('.element_1').not( $(this) ).each( function(){
      $(this).removeClass('active');
      this.tl.reverse();
    });
    // If this is active, reverse ... if not make it active
    if( $(this).hasClass('active') ){
      this.tl.reverse();
      TweenMax.to( $(this).parent().find('.close') , 0.6 , {autoAlpha:0} );
    }else{
      $(this).addClass('active');
      TweenMax.to( $(this).parent().find('.close') , 0.6 , {delay: 0.8, autoAlpha:1});
      this.tl.play();
    }
  });
  
  var elScope = this;
  $(this).parent().find('.close').click( function(){
    TweenMax.to( $(this).parent().find('.close') , 0.6 , {autoAlpha:0} );
    elScope.tl.reverse();
  })
});

function removeActive(el){
  el.removeClass('active');
}

 

The class .element_container_1 is the one that is showing me all the DIV with all the information in this case for item 1. 

 

Now I have all the HTML in the same file so the page loads all the content of the items of the map from the beginning. What I want, for performance purposes, is to only load each content when the animation is active and have all the HTML for each content separately  in different URLs so you only load the item you want to see.

 

I tried to add a load function and then the play but I am not really sure how to make this work:

 

$('.element_container_1').load('element_content_1.html',function(){

 

I tried also this for example but is not loading the content:

      $(this).addClass('active');
      TweenMax.to( $(this).parent().find('.close') , 0.6 , {delay: 0.8, autoAlpha:1});
      this.tl.play();
      $( "#element_1" ).load( "../interactivo/element_1.html #element_container_1" );

 

Any idea how can I add this type of ajax calls when the animation is active?

 

Thanks!!

 

 

[MZBS]

I found this way that works:

 

$('.element_1').each( function(){
  $(this).wrap('<div class="wrapper">');
  $(this).parent().prepend('<span class="close"></span>');
  TweenMax.set( $(this).parent().find('.close') , {autoAlpha:0},'+=2' );
  this.tl = new TimelineMax({paused:true, onReverseComplete: removeActive, onReverseCompleteParams: [$(this)] });
  this.tl.to(".element-container_1", 0.8, {css:{marginLeft:60}, ease:Power2.easeOut});
  this.tl.to(".animacion", 0.8, {css:{marginLeft:-40}, ease:Power2.easeOut},'-=0.3');
  this.tl.to(".mapita img", 1, {right:"-900px", ease:Power2.easeInOut},'-=1.2');
  this.tl.to(".default-container", 0.8, {autoAlpha:0},'-=1.5');
  this.tl.to(".mapa-on", 0.8, {autoAlpha:0},'-=1');
  this.tl.to(".mapa-off", 0.8, {autoAlpha:1},'-=1.3');
  this.tl.to(".elements", 0.6, {autoAlpha:0},'-=1.4');
  this.tl.to(".active_element_1", 0.8, {autoAlpha:1},'-=0.5');
  
  $(this).click( function(){
    // Any others in active state should go back to inactive
    $('.element_1').not( $(this) ).each( function(){
      $(this).removeClass('active');
      this.tl.reverse();
    });
    // If this is active, reverse ... if not make it active
    if( $(this).hasClass('active') ){
      this.tl.reverse();
      TweenMax.to( $(this).parent().find('.close') , 0.6 , {autoAlpha:0} );
    }else{
      $(this).addClass('active');
      TweenMax.to( $(this).parent().find('.close') , 0.6 , {delay: 0.8, autoAlpha:1});
      this.tl.play();
      $('.animacion_1').html('<video class="video" width="320" height="240" autoplay loop muted playsinline><source src="../video/element_1.webm" type="video/webm"><source src="../video/element_1.mp4" type="video/mp4"><source src="../video/element_1.ogg" type="video/ogg"></video>');
      this.tl.to(".animacion .video", 0.6, {autoAlpha:1},'-=0.7');
    }
  });
  
  var elScope = this;
  $(this).parent().find('.close').click( function(){
    TweenMax.to( $(this).parent().find('.close') , 0.6 , {autoAlpha:0} );
    elScope.tl.reverse();
    setTimeout(function() {
      $(".animacion_1 video").remove();
    }, 1000);
    
  })
});

function removeActive(el){
  el.removeClass('active');
}

In this case what I am doing is that if the class is active (animation is done) then I add HTML to my code with the element that is with a bigger size (in this case a video), so I just pre-load for each element the texts and I add the video for each like this with .html function.

 

Then when the animation is close I remove that HTML.

 

I don't know if this is the best way to do this but it works.

 

What do you think?

 

Thanks!

[ZachSaucier]

On 9/2/2019 at 6:53 AM, MZBS said:

I don't know if this is the best way to do this but it works.

 

What do you think?

It's hard to tell exactly what all is going on since you have a lot of different selectors. Maybe a simplified demo would help us suggest a best approach? But if your goal is to just wait to load content until it's clicked on, this approach seems fine. 

[Jonathan]

Hi @MZBS and welcome to the GreenSock Forum!

 

On 9/2/2019 at 5:16 AM, MZBS said:

I tried to add a load function and then the play but I am not really sure how to make this work:

 

$('.element_container_1').load('element_content_1.html',function(){

Keep in mind that the jQuery load() method is deprecated, that means it will be removed from jQuery core soon.

 

But yes like @ZachSaucier advised, a simplified demo will help us better in helping you

 

 

[MZBS]

3 minutes ago, Jonathan said:

Hi @MZBS and welcome to the GreenSock Forum!

 

Keep in mind that the jQuery load() method is deprecated, that means it will be removed from jQuery core soon.

 

But yes like @ZachSaucier advised, a simplified demo will help us better in helping you

 

 

 

Thank you @Jonathan,

 

now with the .html method is working perfectly to wait to load content until it's clicked on. 

 

But I will post for sure a Codepen if I have any other question and also I will show you all the interactive with the animations I am doing.

 

Thanks! 

[OSUblake]

12 minutes ago, Jonathan said:

Keep in mind that the jQuery load() method is deprecated, that means it will be removed from jQuery core soon.

 

There were 2 different load methods. One is for load events like with the window or images, and the other is a shorthand method for Ajax. The former is deprecated, the later is still part of the API.

https://api.jquery.com/load/

 

[Jonathan]

I was referring to the jQuery load() method

 

https://api.jquery.com/load-event/

 

My tired eyes overlooked the .html in the first parameter