Jump to content
Search Community

tween without taking up 'space' in timeline

stupidsimple 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 have the following timeline (simplified for this topic)

 

var tl = new TimelineMax({});
tl.to(".orange", 1.0, {y:200})
.to(".photo", 12.0, {scale:1.2})
.to(".button", 1.0, {opacity:1.0})

 

What I want is that the '.photo' tween doesn't take up space in the timeline.

I know I can use the time parameter for the button like this:

.to(".button", 1.0, {opacity:1.0},"-=12.0")

 

Is there a nicer way to solve this?

What I want is to start a tween in the timeline at a specific moment, but the tween that follows should start right after.

 

 

Link to comment
Share on other sites

Elaborating a bit more on Mikel's suggestion:

 

You can pair what he's suggesting with a label:

 

var tl = new TimelineMax({});
tl.to(".orange", 1.0, {y:200})
.to(".photo", 12.0, {scale:1.2}, 'labelName')
//... more tween stuff
.to(".button", 1.0, {opacity:1.0}, 'labelName')  //insert tween at label 'labelName' of the timeline
.to(".other-button", 1.0, {opacity:1.0}, 'labelName') // that way you can have several tweens off the same spot

 

Not your 'not-taking-space' tweens will all have to be placed at the end of the timeline, else you won't achieve your desired effect.

 

Another alternative is to have a call to a function that triggers whatever tween you want

 

var tl = new TimelineMax({});
tl.to(".orange", 1.0, {y:200})
.to(".photo", 12.0, {scale:1.2})
.call(fireTween, ['.a-button'])
.to(".button", 1.0, {opacity:1.0},0)


function fireTween(el) {
  TweenMax.to(el, 1, {opacity:0);
}

 

But bear in mind those tweens will not be part of the timeline and thus, will not be controlled by it. No pausing, reversing, or anything.

 

  • Like 4
Link to comment
Share on other sites

Firstly:

 

Welcome to the forums.

 

I forgot the greeting in the previous post. ?

 

I wouldn't say what you have is a problem. It all depends what you need to achieve. If your 'not-taking-space' is not related to the timeline, you're far better off calling the function rather than hacking around with Mikel's idea.

 

Bottom line is: it makes no sense to have a tween that does not takes space in a timeline simply because the whole point of organizing tweens in a timeline is to have them controlled and accounted for. If your tween is not part of the timeline, well, call a tween outside the timeline.

 

 

  • Like 2
Link to comment
Share on other sites

in addition to the other great advice you could:

 

1 - Build your entire timeline without the photo animation and then add it LAST at the time you want.

var tl = new TimelineMax({});
tl.to(".orange", 1.0, {y:200})
   .to(".button", 1.0, {opacity:1.0})

  .to(".apple", 1.0, {opacity:1.0})

  .to(".orange", 1.0, {opacity:1.0})

// when all tweens are added then add the photo

  .to(".photo", 12.0, {scale:1.2}, 1)

 

 

2 - create a master timeline with some tweens and the photo tween and then nest another timeline with all the other stuff in it anywhere you want in the master timeline.


 

var otherTimeline = new TimelineLite();

otherTimeline.to(".otherThing1", 1, {x:100})

otherTimeline.to(".otherThing2", 1, {y:100})

otherTimeline.to(".otherThing3", 1, {x:100})

otherTimeline.to(".otherThing4", 1, {y:100})



var tl = new TimelineMax({});
tl.to(".orange", 1.0, {y:200})
   .to(".photo", 12.0, {scale:1.2})
   .add(otherTimeline, 1)

 

  • Like 4
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...