Adding delay to ScrollTrigger timeline.

[Wilson1077 0 Likes (Newbie)]

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 2,017 Likes (Superhero)]

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 0 Likes (Newbie)]

Thank you sir, amazing library.

[Shaun Gorneau 2,017 Likes (Superhero)]

Happy to help!