Jump to content
GreenSock

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

offset tweens after a negative offset

Go to solution Solved by Carl,

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 a sequence of Tweens in a timeline that are staggered by 0.2 seconds.

 

I want them to start 2 seconds early (before the white box fades out)

 

How do I get dot2 to follow dot1 sequentially?

 

Thanks

See the Pen dMxzog by friendlygiraffe (@friendlygiraffe) on CodePen

Link to comment
Share on other sites

There are many ways to do it, but here's the most concise: 

tl.staggerTo([".dot1", ".dot2", ".dot3", ".dot4"], 0.3, {x:"+=150"}, 0.2, "-=2");
  • Like 3
Link to comment
Share on other sites

 

There are many ways to do it, but here's the most concise: 

tl.staggerTo([".dot1", ".dot2", ".dot3", ".dot4"], 0.3, {x:"+=150"}, 0.2, "-=2");

Thanks, but what if there are a series of different timings, with different properties? Something like:

.to(".dot1", 0.3, {x:"+=150"},"-=2")
.to(".dot2", 0.3, {y:"+=150"},"+=0.2")
.to(".dot3", 0.3, {rotation:"+=150"},"+=0.7")
.to(".dot4", 0.3, {alpha:0},"+=6.2")
Link to comment
Share on other sites

  • Solution

Yes, that is a bit different.

In that case, a nested timeline is probably the most straight-forward route:

 

 
var tl = new TimelineLite({onComplete:loop}),
count = 0;


var Stag = 0.2;
var Del = 2.0;


tl.to(".whitebox", 4, {autoAlpha:0})




var child = new TimelineLite()
child.to(".dot1", 0.3, {x:"+=150"})
.to(".dot2", 0.3, {y:"+=150"},"+=0.2")
.to(".dot3", 0.3, {rotation:"+=150"},"+=0.7")
.to(".dot4", 0.3, {x:100, y:100},"+=1")


//place the child at 2 seconds into tl or wherever you want
tl.add(child, 2)

http://codepen.io/GreenSock/pen/bpXYYJ?editors=0010

  • Like 2
Link to comment
Share on other sites

Another technique you could use is with a label:

tl.addLabel("dots", 2)  .to(".dot1", 0.3, {x:"+=150"},"dots")
  .to(".dot2", 0.3, {y:"+=150"},"dots+=0.2")
  .to(".dot3", 0.3, {rotation:"+=150"},"dots+=0.7")
  .to(".dot4", 0.3, {alpha:0},"dots+=6.2");

I personally prefer Carl's technique with splitting things up into child timelines just because it makes things so modular and easy to create functions that spit back animations that can be nested however/wherever you want. Some people prefer using labels, though. Totally up to you. 

  • 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.
×