Jump to content
GreenSock

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

Load dynamically through ajax

Recommended Posts

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!!

 

 

Share this post


Link to post
Share on other sites

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!

Share this post


Link to post
Share on other sites
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. 

  • Like 1

Share this post


Link to post
Share on other sites

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

 

 

:)

  • Like 2

Share this post


Link to post
Share on other sites
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! 

Share this post


Link to post
Share on other sites
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/

 

  • Like 2
  • Thanks 1

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×