Jump to content
Search Community

Add delay between elements in animation

Umberto test
Moderator Tag

Go to solution Solved by GreenSock,

Recommended Posts

Please use the fork button when creating new versions of demos that you share in these forums. Now I cannot see the original demo so I have no idea what "the same reveal animation" refers to. Can you please fork your demo, edit one of them to be what you had previously, then edit your posts so that the demos show both versions? Otherwise I don't know how we can help.

  • Like 2
Link to comment
Share on other sites

There are two methods you could use to do this:

  1. Look through each item at the start and create a timeline for each. Then inside of the batch callbacks you use control methods of the timeline to play it or whatever you need to do.
  2. Inside of the callback with the batch (like onEnter) you could create the animations that you need at that time.

I recommend the first method.

  • Like 1
Link to comment
Share on other sites

I tried the first method you told me but i failed.
Do I have to work on this?

 

let revealContainers = gsap.utils.toArray(".reveal");
revealContainers.forEach((wrapreveal) => {
  let image = wrapreveal.querySelectorAll(".reveal-img");
  let tl = gsap.timeline({
    scrollTrigger: {
      trigger: wrapreveal,
      toggleActions: "restart none none reset"
    }
  });

  tl.set(wrapreveal, { autoAlpha: 1 });
  tl.from(wrapreveal, 1.5, {
    xPercent: -100,
    ease: "power2",
  });
  tl.from(image, 2.5, {
    xPercent: 100,
    scale: 1.3,
    delay: -1.5,
    ease: "power2",
  });
});


Quite right?

Link to comment
Share on other sites

12 minutes ago, Umberto said:

Do I have to work on this? ...  Quite right?

Sorry, I don't understand the question.

 

If you're asking if that's the correct methodology, no. You should create a timeline for each element like I said. Then inside of the batch callbacks you use control methods to control that timeline. I highly recommend my article about animating efficiently as it covers how to do this sort of thing (methodology wise).

Link to comment
Share on other sites

It may have been a little confusing because I think @ZachSaucier had a typo his response where he said "Look through each item" but I think he meant "Loop through each item". And don't feel bad - most people probably wouldn't find it as trivial as it may have been made to sound. Here's how I'd do it: 

 

let revealContainers = gsap.utils.toArray(".reveal");
revealContainers.forEach((wrapreveal) => {
  const image = wrapreveal.querySelector(".reveal-img"),
        tl = gsap.timeline({paused: true});
  tl.set(wrapreveal, { autoAlpha: 1 });
  tl.from(wrapreveal, 1.5, {
    xPercent: -100,
    ease: "power2",
  });
  tl.from(image, 2.5, {
    xPercent: 100,
    scale: 1.3,
    delay: -1.5,
    ease: "power2",
  });
  wrapreveal.animation = tl; // record it on each element so we can reference the timeline later
});

ScrollTrigger.batch(revealContainers, {
  onEnter: elements => elements.forEach((e, i) => e.animation.delay(i * 0.2).restart(true)),
  onLeaveBack: elements => elements.forEach(e => e.animation.pause(0))
});

See the Pen f68f04a21d257afe64118808d4c66ce7?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Is that what you were looking for? 

 

So basically when a batch comes into view, it just loops through those elements, grabs each timeline and restarts it after setting the delay according to its position in the Array (to stagger them). I used a value of 0.2 but obviously you can tweak that to whatever you want. And then when it leaves in the backwards direction, it rewinds the timeline(s) and pauses to be ready to roll again if/when the user scrolls down again. 

  • Like 2
Link to comment
Share on other sites

Hi, I'm not angry, absolutely not, I've been 2 days away and just checked my emails now.

You are fantastic and very prepared, please just have a little patience.

That said, it was what I was looking for and it's a great job, which I will need to animate the whole project I'm working on.

The only thing is that if you can create a variant, and that is to load the animation only once without reloading it when you scroll down.

 

Thanks for your time

Link to comment
Share on other sites

  • Solution
14 minutes ago, Umberto said:

The only thing is that if you can create a variant, and that is to load the animation only once without reloading it when you scroll down.

 

Sure, that's easy:

ScrollTrigger.batch(revealContainers, {
  onEnter: elements => elements.forEach((e, i) => e.animation.delay(i * 0.2).restart(true)),
  once: true
});

See the Pen 6e8cc03a56bb88f7296adf6fa2fd985b by GreenSock (@GreenSock) on CodePen

 

Is that what you want? 

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