Jump to content
GreenSock

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

Handling different animations with ONE timeline on window resize

Recommended Posts

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.

Link to comment
Share on other sites

  • nicmare changed the title to Handling different animations with ONE timeline on window resize

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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. 
 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

  • Like 2
Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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);
  }
}

 

  • Like 2
Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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! 

Link to comment
Share on other sites

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

 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×