Handling different animations with ONE timeline on window resize

[nicmare 5 Likes (Newbie)]

I was literally searching for hours in the doc and in the forums. With GSAP3 what is the easiest way to use ONE timeline and change parameter values while resizing the screen? I found an easy way to load different values on page load. But i fail to change them on window resize event:

let hns_megamenu1 = $("#hns_megamenu1");
let tl_mm1 = gsap.timeline();
let push_y1 = hns_megamenu1.outerHeight();
let push_y2 = hns_megamenu2.outerHeight();
let push_x = 0;
let autoAlpha = 1;

if(device_info === "mobile"){
    push_y1 = 0;
    push_y2 = 0;
    autoAlpha = 0;
    push_x = 50;
}
tl_mm1.from(hns_megamenu1, {
    display:"none",
    marginTop: "-"+push_y1,
    duration: .3,
    x: "+="+push_x,
    autoAlpha: autoAlpha,
    ease: "ease",

}).pause();

 

$("[data-toggle-megamenu]").on('click', function(event) { 
 tl_mm1.play();
});

 

i successfully managed to change values in a swiper instance by using their update event:

var resizeTimeout;
$(window).on("resize",function(){
    if(!!resizeTimeout){ clearTimeout(resizeTimeout); }
    resizeTimeout = setTimeout(function(){
      device_info = window.elementorFrontend.elements.$body[0].dataset.elementorDeviceMode;
      var mm_swiper = $("#hns_megamenu1 > .elementor-container")[0].swiper;
      mm_swiper.update();
    },100);
});

my approach was to do something similar with GSAP but can not find any similar to an "reinitialisize" or "update" event here.

[Cassie 5,658 Likes (Superhero)]

I think you're looking for  invalidateOnRefresh and functional values?

Like this demo? Let me know if this helps.

See the Pen QWyxgeN by GreenSock (@GreenSock) on CodePen

[nicmare 5 Likes (Newbie)]

i do not see where this could help. i do not use scrolltrigger component.

[Cassie 5,658 Likes (Superhero)]

Oh sorry -  I misunderstood.

I'd recommend killing animations and starting new ones when a breakpoint is reached. 

You'll be needing to look at  .invalidate() or .kill() 

Maybe this thread will help?

If you put together a minimal demo we can be of better assistance. 
 

[nicmare 5 Likes (Newbie)]

sure here is a very simple sample written in codepen. 

 

page load desktop:

See the Pen MWmygKW?device=desktop by nicmare (@nicmare) on CodePen

 

page load mobile/tablet

See the Pen ExmKYRm?device=mobile by nicmare (@nicmare) on CodePen

 

When you resize THIS window,  the variable "device_info" changes. But when you hit "Start" in the first codepen it still plays the timeline with the old values. but it should look like in the 2nd codepen. i need an idea how to get gsap using the updated device_info value.

[OSUblake 18,538 Likes (Superhero)]

Just follow this example.

 

See the Pen xxdVxbW by GreenSock (@GreenSock) on CodePen

 

[OSUblake 18,538 Likes (Superhero)]

👆 The logic is still the same if you don't use media query listeners.

[nicmare 5 Likes (Newbie)]

i just simplified my codepen. the problem is that i need to insert gsap code to an existing (elementor) wordpress page where device_info is already given. they already use some kind of window resize listeners deep in there frontend js. therefore i wanted to use that changing variable for gsap too to avoid to many running functions at the same time. performance… is there another example without using matchMedia?

[OSUblake 18,538 Likes (Superhero)]

Like I said, the logic is the same.

 

function onResize() {
  
  tl.progress(0).kill();
  
  if (someCondition) {
    
    tl = gsap.timeline()    
      .to(".red", { rotation: 360 }, 0.5)
      .to(".blue", { x: 200 }, 0.5);
    
  } else {
    
    tl = gsap.timeline()
      .to(".red", { x: 200 }, 0.5)
      .to(".blue", { rotation: 360 }, 0.5);
  }
}

 

[OSUblake 18,538 Likes (Superhero)]

14 minutes ago, nicmare said:

therefore i wanted to use that changing variable for gsap too to avoid to many running functions at the same time. performance

 

There is no need to try and optimize GSAP. You could have 1,000 animations running and it could still perform fine. Performance comes down to how fast the browser can render those changes. It all depends on what you are animating.

[nicmare 5 Likes (Newbie)]

28 minutes ago, OSUblake said:

Like I said, the logic is the same.

 

function onResize() {
  
  tl.progress(0).kill();
  
  if (someCondition) {
    
    tl = gsap.timeline()    
      .to(".red", { rotation: 360 }, 0.5)
      .to(".blue", { x: 200 }, 0.5);
    
  } else {
    
    tl = gsap.timeline()
      .to(".red", { x: 200 }, 0.5)
      .to(".blue", { rotation: 360 }, 0.5);
  }
}

 

thank you very much. that simple breakdown is what i will try now. but from my point of view as a user it still feels complicated because of redundant partial code. just take this as feedback please. not complaining! 

[OSUblake 18,538 Likes (Superhero)]

There's nothing redundant in that code. Those are completely different animations. Notice how the x and rotation are swapped. And it's very simplified example. You could of course call a function in the if/else statement. 

 

There's a million and one different ways to handle resizes, and that was just one. Here's another.

 

See the Pen NWjNPLB by GreenSock (@GreenSock) on CodePen