Update TweenMax.from assigned values after window resize event

[picitelli]

Is it possible to re-draw/update a timeline after a window resize event has fired? 

 

I have a timeline animation that animates the widths and heights of elements from 0 to their set CSS values (e.g. 50%, 100%). Using TweenMax.from, I am able to accomplish what I need. And since my CSS values are percentage based, this works for all device widths on initial load. Once I resize, those values that were calculated on initial load are stored and not re-run. I am looking for a way to update the values that are assigned for the TweenMax.from after a resize event has fired. Is that possible?

 

I can provide a code example if needed.

// animations controller
var animationsController = new ScrollMagic();

// scene 1 animations
var scene1Animations = new TimelineMax()
  .add([
    TweenMax.from('.line--1', .5, {
      height: 0
    })
  ])
  .add([
    TweenMax.from('.line--2', 1, {
      width: 0
    })
  ])
  .add([
    TweenMax.from('.line--3', 1, {
      height: 0
    })
  ])
  .add([
    TweenMax.from('.line--4', 1, {
      width: 0
    })
  ])
  .add([
    TweenMax.from('.line--5', 1, {
      height: 0
    })
  ])

// scene 1
var heroEl = $('.hero'),
    scene1El = $('.scene--1'),
    scene1Scene = new ScrollScene({
      triggerHook: 'onCenter',
      triggerElement: scene1El,
      duration: $(window).height();
    })
    .setTween(scene1Animations)
    .addTo(animationsController);


// update on resize
$(window).on('resize', function() {

  clearTimeout(resizeTimer);

  resizeTimer = setTimeout(function() {

    // update scene 1
    scene1Scene.duration($(window).height());
    scene1Scene.setTween(scene1Animations);

    // need a way to update

  }, 250);

});

[GreenSock]

I'm not very familiar with ScrollMagic or its API, but I'd guess that it's probably cleanest to just rebuild that timeline with the new values on resize. Just kill() the old one and create a new one. Any reason you can't do that? 

 

Oh, and also, your tweening code is valid but you could make it a lot more concise by using the convenience methods of the timeline classes. 

.from('.line--1', .5, {height: 0})
.from('.line--2', 1, {width: 0})
.from('.line--3', 1, {height: 0})
.from('.line--4', 1, {width: 0})
.from('.line--5', 1, {height: 0});

Happy tweening!

[picitelli]

Jack, thank you for your prompt response. Instead of killing the old timeline on resize and creating a new one, is there a method I can use to "update" or "re-render" a timeline I've already defined? 

[GreenSock]

Yes and no. GSAP is extremely optimized for performance, so the first time any tween is rendered, it reads & records certain data like the starting/ending values for each target as well as some other stuff so that it can be extremely fast with rendering thereafter. That's why it's often not very cost-effective to try to update an existing tween/timeline's values (it'd have to do the work of flushing out the old stuff as well as recording the new stuff). That being said, yes, you could invalidate() the tween/timeline and update the tween.vars with new values. I just didn't think that's as intuitive as just creating new animations but perhaps in your workflow it'd be fine. 

 

As for a method you can call in the ScrollMagic API to accommodate that, I'm really not sure. I've never used that and didn't author that tool. That'd be a question for the ScrollMagic folks (well, Jan the author or someone familiar with that API). 

[RealMakAttak]

Yes and no. GSAP is extremely optimized for performance, so the first time any tween is rendered, it reads & records certain data like the starting/ending values for each target as well as some other stuff so that it can be extremely fast with rendering thereafter. That's why it's often not very cost-effective to try to update an existing tween/timeline's values (it'd have to do the work of flushing out the old stuff as well as recording the new stuff). That being said, yes, you could invalidate() the tween/timeline and update the tween.vars with new values. I just didn't think that's as intuitive as just creating new animations but perhaps in your workflow it'd be fine. 

 

As for a method you can call in the ScrollMagic API to accommodate that, I'm really not sure. I've never used that and didn't author that tool. That'd be a question for the ScrollMagic folks (well, Jan the author or someone familiar with that API). 

 

Hello Jack, wondered if you can help please.

 

I tried killing a timeline on resize but I got an error saying the timeline was undefined.

 

Is this a scope problem? How can I get the timeline variable in to my resize function?

 

Thanks

[GreenSock]

Yes, it definitely sounds like a scope issue in your code, @REalMakAttack. Very difficult to troubleshoot blind, though. If you still need help, please create a reduced test case in codepen or jsfiddle so we can see what's going on in your code. 

 

Happy tweening!