Jump to content
Search Community

Secondary Tween Only While Main Tween is Active - Tweenception

SammyC123 test
Moderator Tag

Go to solution Solved by GreenSock,

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 know I have read or seen something about this before, but after searching the forums, documentation, and Codepen to the best of my abilities, I have come up empty-handed.


I want to have a secondary tween that is only active while the main tween is active.  I have (poorly) emulated this behavior in my Codepen by using onStart and onComplete, but this is a clunky solution at best.


Is there functionality I'm overlooking that allows a second tween to run only while the first is active?  And while I'm wishing for things, does it complete in an elegant manner... meaning it uses the first tween's timing as a start- and end-point so that they, um, mesh in harmony?


Feel free to improve my Codepen in any way possible!

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

Link to comment
Share on other sites

  • Solution

There are actually a lot of ways you could handle this. If your goal is to be able to drop them both into an easily-controllable container (a TimelineMax), you could do that and just use a tweenFromTo() to basically play from one spot to another spot in that timeline and stop, like this: 

var tl = new TimelineMax({paused:true});
tl.fromTo(".box", 5.5, {x:0}, {x: 500, ease:Linear.easeNone});
tl.fromTo(".box", 1, {y: 10}, {y: -10, yoyo: true, repeat: -1, ease:Linear.easeNone}, 0);

$("button").on("click", function() {
  tl.tweenFromTo(0, 5.5);



If you need to keep things as separate tweens (not using a TimelineMax), that's entirely possible too. You could just keep a reference of that "y" tween and then restart() it in an onStart from your other tween, and pause() it in an onComplete. There are other ways you could do it too, but I don't want to confuse things by offering too many different techniques :) 

  • Like 3
Link to comment
Share on other sites

As usual, this is great and almost exactly what I was looking for.  Jack strikes again with perfection!  Whenever I think I've seen almost everything GSAP has to offer, you come along and teach me something new:  tweenFromTo


I am interested in some of those additional techniques you speak of, though, so feel free to confuse me any time.  :D

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