issue with timelines and negative delays

[FrancescoB]

(almost) every tween with a negative delay I put in a timeline is already there BEFORE the tl starts. When I say already there I mean it already has more than 0 opacity when I animate it FROM 0 opacity. This never happens to the first element of the timeline (which has 0 delay) but happens a lot with subsequent elements who have negative delay. 

Now I know this happens regularly when the negative delay of the tween is larger than the duration of the previous tween, which kind of makes sense, but it's also happening a lot (not always) with proper, smaller negative delay, like in this case, .corsi-grid_out > p and .corsi-grid > * are already visible before the tl triggers.

 

tlCorsi2.from (".corsi-grid_out > h2", {duration: 1, ease: "back.out(1)", opacity: 0, y: -40})
        .from (".corsi-grid_out > p", {duration: 1, ease: "back.out(1)", opacity: 0, y: -40, delay: -0.7})
        .from (".corsi-grid > *", {duration: 1, ease: "back.out(1)", opacity: 0, delay: -0.7});

            var scene = new ScrollMagic.Scene ({
                    triggerElement: ".corsi-grid_out",
                    triggerHook: 0.7,
                    reverse: false
                })
            .setTween(tlCorsi2)
            .addTo(controller);

 

apparently, this happens only with tl triggered by scrollmagic, but I don't know why that could relate to the gsap timeline.

 

I've tried and tried but to no avail. I've kind of worked around this by using only one tween and using stagger as much as possible, but sometimes is not a nice solution. Any help?

[ZachSaucier]

Hey FrancescoB and welcome to the GreenSock forums!

 

13 minutes ago, FrancescoB said:

apparently, this happens only with tl triggered by scrollmagic, but I don't know why that could relate to the gsap timeline.

Sounds like a ScrollMagic issue to me. I would say post in the repo, but it's not maintained. We don't really recommend using ScrollMagic. In fact, GreenSock is currently developing its own scroll plugin for GSAP! It's in private beta right now. What I recommend before then is just attaching the timeline's progress to the page's scroll position. I talk about how to do that in the control method section of my article on tips to animate efficiently. 

[ZachSaucier]

A potential different work around (I haven't tested it) is to use the position parameter instead of delay. It's more "correct" to do so anyway.

tlCorsi2.from (".corsi-grid_out > h2", {duration: 1, ease: "back.out(1)", opacity: 0, y: -40})
        .from (".corsi-grid_out > p", {duration: 1, ease: "back.out(1)", opacity: 0, y: -40}, "-=0.7")
        .from (".corsi-grid > *", {duration: 1, ease: "back.out(1)", opacity: 0}, "-=0.7");

It might face the same error with ScrollMagic, I dunno ¯\_(ツ)_/¯

[FrancescoB]

8 minutes ago, ZachSaucier said:

A potential different work around (I haven't tested it) is to use the position parameter instead of delay. It's more "correct" to do so anyway.

tlCorsi2.from (".corsi-grid_out > h2", {duration: 1, ease: "back.out(1)", opacity: 0, y: -40})
        .from (".corsi-grid_out > p", {duration: 1, ease: "back.out(1)", opacity: 0, y: -40}, "-=0.7")
        .from (".corsi-grid > *", {duration: 1, ease: "back.out(1)", opacity: 0}, "-=0.7");

It might face the same error with ScrollMagic, I dunno ¯\_(ツ)_/¯

 

this works fine! thanks a lot! I didn't know about this position parameter, I thought delay was the way to... well... delay tweens between each other in a timeline.

 

Looking forward to the GSAP scroll plugin!

 

[ZachSaucier]

2 minutes ago, FrancescoB said:

I thought delay was the way to... well... delay tweens between each other in a timeline.

It can be used for that. But the position parameter is a lot more powerful and a little bit less messy. Generally speaking delays are more helpful for just tweens (not in a timeline).