Jump to content

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

Adding delay to ScrollTrigger timeline.

Recommended Posts



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,



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.