Delay between twins on the same timeline

[RubberFruit]

 

Hello! Guys, can you help please. I want to animate the appearance of each labeled block with transparency and exit from the bottom, so that each next element appears with a small delay. I tried putting the position attribute in from (which comes at the very end), but it didn't work, I tried staggerFrom - that didn't work either. As a result, I got it and I don’t understand why there is a delay between animations, although I didn’t specify it, but this doesn’t suit me either, because it works too fast (duration doesn’t work, the delay attribute does not affect the delay itself between elements). Moreover, the animation on the buttons does not work for some reason (showed on the video, although the blocks are marked). Can you suggest what I'm doing wrong? Thank you!

 

Link to current result : https://veed.io/view/ebbb758d-974b-451c-9cac-8877cc09f0b9

 

gsap.config({
            autoSleep: 60,
            force3D: true,
            nullTargetWarn: false,
            trialWarn: false,
            units: {left: "%", top: "%", rotation: "rad"},
        });

        gsap.registerPlugin(ScrollTrigger);

        ScrollTrigger.normalizeScroll({
            type: "touch",
        });
        ScrollTrigger.config({
            limitCallbacks: true,
            ignoreMobileResize: true,
        })

const animationTl1 = gsap.timeline({
            paused: false
        });
        let animationItems1 = gsap.utils.toArray("[data-animated-item-from-bottom-with-delay-slider]");

        animationItems1.forEach((item, i) => {
            animationTl1
                .from(item, {
                    opacity: 0,
                    translateY: 100,
                    duration: 0.5
                })
        });

        ScrollTrigger.create({
            animation: animationTl1,
            trigger: "[data-slider-animation-section]",
            start: "top 55%",
            end: "top 55%",
            scrub: 2,
        });

See the Pen qByVQor by rubberfruits (@rubberfruits) on CodePen

[Rodrigo]

Hi,

 

Is really hard for us to debug a codesnippet based on a description and a video. Please provide a minimal demo that clearly illustrates the problem. Please don't include your entire project, just some divs and elements that show the issue so we can tinker with it.

 

Happy Tweening!

[RubberFruit]

1 hour ago, Rodrigo said:

Hi,

 

Is really hard for us to debug a codesnippet based on a description and a video. Please provide a minimal demo that clearly illustrates the problem. Please don't include your entire project, just some divs and elements that show the issue so we can tinker with it.

 

Happy Tweening!

 

 

 

Hello!) I made an example and it is very similar to what is happening in the video. Why is there a delay here too, although I did not specify it? Attached to my first comment)

 

I really want to get such a result : so that after passing the beginning of the trigger, the animation is played completely, without reference to the scroll (opacity and translate) and so that from the beginning of the first animation (header) all animation traces go with a delay of ~ 0.1ms (to have a consistent effect). How can I add such a result and what have I already done wrong?

[Rodrigo]

Hi,

 

The issue is that you're looping through all the elements and adding a Tween for each element to a timeline. By default GSAP adds a new instance/label/callback at the end of the timeline, right after the end of the previous one.

 

If you want all elements to come in at once just tell GSAP to add the elements at the start of the timeline, using 0 in the position parameter:

animationItems1.forEach((item, i) => {
  animationTl1.from(item, {
    opacity: 0,
    translateY: 100,
    duration: 0.5
  }, 0); // <- Position - all instances are added at the start of the timeline
});

If you want to create a stagger effect with a loop use the index value in the loop:

animationItems1.forEach((item, i) => {
  animationTl1.from(item, {
    opacity: 0,
    translateY: 100,
    duration: 0.5
  }, 0.075 * i);
});

If you want to create a stagger, don't loop the elements. Pass the array to GSAP and add a stagger value. GSAP does the looping for you:

const animationTl1 = gsap.from(animationItems1, {
  opacity: 0,
  translateY: 100,
  stagger: 0.075,
});

Hopefully this clear things up. Let us know if you have more questions.

Happy Tweening!

[RubberFruit]

11 hours ago, Rodrigo said:

Hi,

 

The issue is that you're looping through all the elements and adding a Tween for each element to a timeline. By default GSAP adds a new instance/label/callback at the end of the timeline, right after the end of the previous one.

 

If you want all elements to come in at once just tell GSAP to add the elements at the start of the timeline, using 0 in the position parameter:

animationItems1.forEach((item, i) => {
  animationTl1.from(item, {
    opacity: 0,
    translateY: 100,
    duration: 0.5
  }, 0); // <- Position - all instances are added at the start of the timeline
});

If you want to create a stagger effect with a loop use the index value in the loop:

animationItems1.forEach((item, i) => {
  animationTl1.from(item, {
    opacity: 0,
    translateY: 100,
    duration: 0.5
  }, 0.075 * i);
});

If you want to create a stagger, don't loop the elements. Pass the array to GSAP and add a stagger value. GSAP does the looping for you:

const animationTl1 = gsap.from(animationItems1, {
  opacity: 0,
  translateY: 100,
  stagger: 0.075,
});

Hopefully this clear things up. Let us know if you have more questions.

Happy Tweening!

 

Thanks a lot! Your third option worked exactly as I wanted!))

 

Another small question: if I want the opacity animation to start a little later, do I need to make a separate timeline for this, or can I somehow set a delay only for opacity immediately inside "from"?

[Rodrigo]

Hi,

 

You could create a new from instance in the same timeline with a delay, using the position parameter. Something like this:

const animationTl1 = gsap
.from(animationItems1, {
  translateY: 100,
  stagger: 0.075,
})
.from(animationItems1, {
  opacity: 0,
  stagger: 0.075,
}, 0.1);// <- Here

In the code above there is an extra animation for the opacity, with the same stagger time for each element, that starts 0.1 seconds after the first instance in the timeline.

 

Hopefully this clear things up. Let us know if you have more questions.

 

Happy Tweening!

[RubberFruit]

10 hours ago, Rodrigo said:

Hi,

 

You could create a new from instance in the same timeline with a delay, using the position parameter. Something like this:

const animationTl1 = gsap
.from(animationItems1, {
  translateY: 100,
  stagger: 0.075,
})
.from(animationItems1, {
  opacity: 0,
  stagger: 0.075,
}, 0.1);// <- Here

In the code above there is an extra animation for the opacity, with the same stagger time for each element, that starts 0.1 seconds after the first instance in the timeline.

 

Hopefully this clear things up. Let us know if you have more questions.

 

Happy Tweening!

 

Thank you very much, you helped me a lot!! Another question, are there any resources / videos / courses that show the advanced level of using GSAP? (except for the library - unfortunately, English is not my native language and I would like to see the result on videos or articles)

[Rodrigo]

Hi,

 

You can check the youtube channel:

https://www.youtube.com/c/GreenSockLearning

 

Also @Carl has some great learning resources at a very good price, over 200 videos where he covers a lot of different aspects of GSAP with an extremely reasonable lifetime access price. He's been involved with GSAP for over 10 years and is a great teacher as well:

https://www.creativecodingclub.com/bundles/creative-coding-club?ref=44f484

 

Happy Tweening!

[RubberFruit]

21 hours ago, Rodrigo said:

Hi,

 

You can check the youtube channel:

https://www.youtube.com/c/GreenSockLearning

 

Also @Carl has some great learning resources at a very good price, over 200 videos where he covers a lot of different aspects of GSAP with an extremely reasonable lifetime access price. He's been involved with GSAP for over 10 years and is a great teacher as well:

https://www.creativecodingclub.com/bundles/creative-coding-club?ref=44f484

 

Happy Tweening!

Thank you very much, I'll try)