Adding delay to ScrollTrigger timeline.

[Wilson1077]

Hi,

 

I am trying to add a small delay to the start my ScrollTrigger timeline with scrub. Basically as soon as the pin starts the opacity begins to fade, I would like a small delay before that happens.

 

My current solution is to use an empty tween ('.empty-tween' is not a real element) at the beginning as shown below. However, I thought this looks/feels a bit inelegant and was hoping there was a better solution.

 

    timeline = gsap.timeline({
      scrollTrigger: {
        trigger: '.logo_block_content_block',
        start: 'center center',
        end: '+=100%',
        scrub: true,
        pin: 'body',
        pinSpacing: false
      }
    })
    .to('.empty-tween', {opacity: "1"}, "scene-0")
    .to('.example', {fill: "#F5F5F5"}, "scene-1")
    .to('.example1', {opacity: 0}, "scene-1")
    .to('.example2', {fill: "#1C3661"}, "scene-2")
    .to('.example3', {fill: "#6fc4c2"}, "scene-2")
    .to('.example4', {fill: "#6ab651"}, "scene-2")

 

Many thanks,

Liam

 

[Shaun Gorneau]

Hi @Liam W,

 

You can add a delay value to the first tween.

 

See the Pen bGqwzXW?editors=0010 by sgorneau (@sgorneau) on CodePen

[Wilson1077]

Thank you sir, amazing library.

[Shaun Gorneau]

Happy to help!

[hpbruna]

var mission_animation = gsap.timeline();

 

mission_animation.set(goal1, { className: "block-mission__goal block-mission__goal--1 block-mission__goal--active"}, "1")

mission_animation.to('body',{ delay: 80 }, "1")

mission_animation.set(goal1, { className: "block-mission__goal block-mission__goal--1 "}, "2")

mission_animation.set(link1, { className: "block-mission__link block-mission__link--1"}, "2")

mission_animation.set(link2, { className: "block-mission__link block-mission__link--2 block-mission__link--active"}, "2")

mission_animation.set(goal2, { className: "block-mission__goal block-mission__goal--1 block-mission__goal--active"}, "2")

mission_animation.to('body',{ delay: 10 }, "2")

mission_animation.set(link2, { className: "block-mission__link block-mission__link--1"}, "3")

mission_animation.set(link3, { className: "block-mission__link block-mission__link--3 block-mission__link--active"}, "3")

mission_animation.set(goal2, { className: "block-mission__goal block-mission__goal--1 "}, "3")

mission_animation.set(goal3, { className: "block-mission__goal block-mission__goal--1 block-mission__goal--active"}, "3")

mission_animation.to('body',{ delay: 10 }, "3")

 

I'm doing this, but the scrub rushes trough the scenes and only the last scenes is visible till I scroll out.

any ideas?

[Rodrigo]

Hi,

 

Is really hard for us to solve issues without a minimal demo. Please try to re-create what you have in the simplest possible way so we can have a better idea of the problem.

 

What I can see from the code you shared is that you are adding extremely long delays (80 and 10 seconds) to your timeline and then in the timeline's instances you're passing just a string with a number which GSAP interprets as an absolute position, so all your instances are added at 1, 2 and 3 seconds but you add a delay of 80 in the timeline at the same position of the first instance.

 

Take a deeper look at the docs for Timelines and the position parameter to better understand how it works:

https://greensock.com/docs/v3/GSAP/Timeline

 

Let us know if you have more questions.

Happy Tweening!

[hpbruna]

Thank you @Rodrigo. The long delays were only there to check if something really happened. But I didn't know that "a string with a number which GSAP interprets as an absolute position". I changed it to "scene-1" etc. and now it works.