Jump to content
Search Community

Negative delay on Timeline

Joooonatan 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

Hi,

 

Is it possible to have a negative delay on a timeline. 

 

var tl2 = new TimelineMax({delay:-10, repeat: -1});
    tl2.fromTo(".cloud-container-2", 5,{top:200, scale:1, opacity:0}, {top:200, scale:1, opacity:1, ease:Power0.easeNone})
    tl2.to(".cloud-container-2", 5, {top:300, scale:2, ease:Power0.easeNone})
    tl2.to(".cloud-container-2", 5, {top:400, scale:3, ease:Power0.easeNone})

 

This does not work. 

 

Link to comment
Share on other sites

Like @Sahil, I'm curious about what your goal is. If you want to jump to a certain place in the timeline, it's as simple as:

 

tl2.seek(10); 

 

Or you can do it any number of other ways, like tl2.time(2) or tl2.totalTime(2) or set the progress between 0-1 like tl2.progress(0.5) to jump to the halfway point, etc. 

  • Like 1
Link to comment
Share on other sites

Hi @Joooonatan :)

 

Welcome to the forum.

 

If you start a timeline with a negative delay, I'm pretty sure you'll rip a hole in the space-time continuum. ;)

 

Actually, I think you may be looking for the position parameter. If you add those nested timelines to a master timeline, you can start them at labels, hard-coded times or relative to their normal start time. It could be something as simple as this.

 

var tl1 = new TimelineMax();
var tl2 = new TimelineMax();
var master = new TimelineMax();
tl1.to(someElement, 20, {...});
tl2.to(anotherElement, 10, {...});
master.add(tl1);
master.add(tl2, 10);

 

That would start tl2 at the 10 second mark on the master timeline. That's just the basics of the powerful position parameter. Check out this post for more info and a better understanding.

https://greensock.com/position-parameter

 

You should also look at creating your timelines in functions and returning them for use on a master timeline. Here's @Carl's recent article to show you how it's done.

https://css-tricks.com/writing-smarter-animation-code/

 

Hopefully that helps. Happy tweening and welcome aboard

:)

 

  • Like 5
  • Haha 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...