Umberto Posted December 31, 2020 Share Posted December 31, 2020 Hi, I tried to create an animation but I can't create a delay between the various elements. I tried to insert "stagger: {amount: 1.3}", but the elements all start together. Where am I wrong? Thanks See the Pen PoGQeda by umberto (@umberto) on CodePen Link to comment Share on other sites More sharing options...
mikel Posted December 31, 2020 Share Posted December 31, 2020 Hey @Umberto, Maybe you could use ScrollTrigger.batch () to do this See the Pen zYrxpmb by GreenSock (@GreenSock) on CodePen Happy batching ... Mikel 3 Link to comment Share on other sites More sharing options...
Umberto Posted December 31, 2020 Author Share Posted December 31, 2020 Thanks for the reply. I thought about this and tried it and that's what I want, but I can't create the same reveal animation anymore. Any solution? Link to comment Share on other sites More sharing options...
ZachSaucier Posted December 31, 2020 Share Posted December 31, 2020 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. 2 Link to comment Share on other sites More sharing options...
Umberto Posted December 31, 2020 Author Share Posted December 31, 2020 You're right, I'm sorry. This is the old version with the Reveal effect that interests me: See the Pen qBaxygW by umberto (@umberto) on CodePen While this is the version I tried to modify Thanks Link to comment Share on other sites More sharing options...
ZachSaucier Posted December 31, 2020 Share Posted December 31, 2020 There are two methods you could use to do this: 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. 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. 1 Link to comment Share on other sites More sharing options...
Umberto Posted January 1, 2021 Author Share Posted January 1, 2021 I tried and tried for hours but failed, for me this is too complicated. Thanks Link to comment Share on other sites More sharing options...
ZachSaucier Posted January 1, 2021 Share Posted January 1, 2021 How about you share your attempts with us and we can help you out where you're stuck? Link to comment Share on other sites More sharing options...
Umberto Posted January 1, 2021 Author Share Posted January 1, 2021 The best I managed to get is this: See the Pen rNMJEYr by umberto (@umberto) on CodePen Link to comment Share on other sites More sharing options...
ZachSaucier Posted January 1, 2021 Share Posted January 1, 2021 Based on your code, it doesn't look like you attempted to follow my instructions. How about you try to do the first method that I mentioned above? Link to comment Share on other sites More sharing options...
Umberto Posted January 1, 2021 Author Share Posted January 1, 2021 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 More sharing options...
ZachSaucier Posted January 1, 2021 Share Posted January 1, 2021 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 More sharing options...
GreenSock Posted January 1, 2021 Share Posted January 1, 2021 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. 2 Link to comment Share on other sites More sharing options...
Umberto Posted January 4, 2021 Author Share Posted January 4, 2021 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 More sharing options...
Solution GreenSock Posted January 4, 2021 Solution Share Posted January 4, 2021 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? 5 Link to comment Share on other sites More sharing options...
Umberto Posted January 5, 2021 Author Share Posted January 5, 2021 This is perfect. Thanks for your work and for your time Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now