Jump to content
Search Community

How to Run Tweenlite and TweenMax script simultaneously

jemfrim949 test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

I would like to combine two tweenlite scripts with one tweenMax script. If I dont include the tweenMax the tweenLite script executes and vis versa.

 

Can you simultaneously run tweenMax tweens and tweenLites? If so how?

 

CodpenLink: 

See the Pen JvcEt by anon (@anon) on CodePen

 

 

Note:Orange Block represents the logo

 

Cheers

Link to comment
Share on other sites

Thanks for the codepen, it really helps get to the answer quickly!

 

Yes, you can combine as many TweenLite and TweenMax tweens as you would like - there's no incompatibility between using the 2, and they will only 'interfere' with each other if they try to tween the same properties of the same target at the same time. GSAP has very customisable overwrite options though, so this can be easily handled in multiple ways (and the default, 'auto', is the desired overwrite for the majority of cases).

 

Your codepen is failing for two reasons:

  1. (not related to your issue) You've wrapped the JS section in codepen with <script> tags. You'll need to remove these as the JS section represents the contents of a <script> tag.
  2. You've used two window.onload functions, which won't work since the second one overwrites the first. The #barTop/#barBottom tweens are never created as that function is destroyed when you create the onload for #logo.

You could try a pattern like this instead, which allows you to have multiple window load functions:

var load1 = function () {
  var barTop = document.getElementById("barTop");
  var barBottom = document.getElementById("barBottom");

  TweenLite.to(barTop, 3, {width:"100%"});
  TweenLite.from(barBottom, 3, {width:"80%"});
};

if (window.addEventListener) {
  window.addEventListener('load', load1);
} else if (window.attachEvent)  {
  window.attachEvent('load', load1);
}
var load2 = function () {
  var logo = document.getElementById("logo");
  TweenMax.to(logo, 1, {left:"87%", repeat:1, yoyo:true, delay:1});
};

if (window.addEventListener) {
  window.addEventListener('load', load2);
} else if (window.attachEvent)  {
  window.attachEvent('load', load2);
}

addEventListener

  • Like 3
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.
×
×
  • Create New...