CODEWITHSUNDEEP
javascriptjquerygsap
Jay Cee
Jay Cee

Reputation: 1965

Displaying different JS animation on window resize

Until min-height 1200px I have an HTML5 video, playing or stopping depending where you are on the page.

Then under 1200px you are suppose to have an images sequence, defined like this in the HTML :

<div class="col-lg-6 col-md-12 col-xs-12 right">
        <video webkit-playsinline loop id="rightVideo" poster="{% static 'home_page/assets/videos/transparent.png' %}">
          <source src="{% static 'home_page/assets/videos/720x700.mp4' %}" type="video/mp4">
          <source src="{% static 'home_page/assets/videos/720x700.ogg' %}" type="video/ogg">
          <source src="{% static 'home_page/assets/videos/720x700.webm' %}" type="video/webm">
          Your browser does not support HTML5 video.
        </video>
        <img alt="blippar blipp images sequence" id="images-sequence" src="">
</div>

Thus the images are load in JS and displaying with GSAP like this :

    this.imagesSequence = function(){
    var imageSeq = new TimelineMax({repeat: -1});
        imageSeq
            .to(obj, 25, {
                curImg: imagesSequenceNb.length - 1,
                roundProps: "curImg",
                immediateRender: true,
                ease: Linear.easeNone,
                onUpdate: function() {
                    //next image on update
                    sequence.src = imagesSequenceNb[obj.curImg];                    
                }
            }, 2);
};

Finally, I manage the different size screen:

if (window.innerWidth > 1200) {
  var imgPath = "{% static 'home_page/assets/' %}",
      myanimations = new homeAnimations(imgPath);

  myanimations.loadImages();
   {..code...}
} else if (window.innerWidth > 990 && window.innerWidth <= 1200) {
  var rightVideo = document.getElementById("rightVideo");

  rightVideo.play();
} else {
  var $nav_header = $(".navbar-fixed-top"),
      header_height = $('.navbar-fixed-top').height(),
      images_height = $('.header-plugin').height(),
      offset_val = images_height - header_height;
  var circleMobile = document.getElementById("circle-mobile");
  var birdVideo = document.getElementById("birdVideo");

  var imgPath = "{% static 'home_page/assets/' %}",
      myanimationsMobile = new homeAnimations(imgPath);

  myanimationsMobile.loadImages();
  myanimationsMobile.imagesSequence(); //I want to display this on resize !!

  birdVideo.play();

  TweenLite.to(circleMobile, 1, {rotation: 180});
}

So, if the screen is resize and then page is refreshing, no problem. But the transition isn't dynamic when you are resizing by hand the page..

Any idea ?

Upvotes: 0

Views: 83

Answers (2)

Zorken17
Zorken17

Reputation: 1896

I think you need to have a dynamic control:

 window.onresize = function() {        
    if (window.innerWidth > 1200) {
      do somthing
    }
 };

That will dynamicly lisen for change. Hope it helps.

If your site is hevy, make a timer like this to wait befor onresiz.

    function waitForWindowResize() {
        var rtime;
        var timeout = false;
        var delta = 200;

        function resizeend() {
            if (new Date().getTime() - rtime < delta) {
                setTimeout(resizeend, delta);
            } else {
                timeout = false;

                YOUR CODE HERE

            }
        }

        $(window).resize(function () {
            rtime = new Date();
            if (timeout === false) {
                timeout = true;
                setTimeout(resizeend, delta);
            }
        });
    }

Upvotes: 1

laszlokiss88
laszlokiss88

Reputation: 4081

When will this code run? Put it into a window resize event handler like this:

$(window).resize(function() {

    if (window.innerWidth > 1200) {
    ...
});

Upvotes: 1

Related Questions