[Section counter]

Hi Shaun,

 

A big thanks for your answer and explanation. Several things that i didnt catch:  scrollTrigger.create, onEnter/Back, and a gsap function. I need to look further at it and not only the basics of gsap. 

 

Many thanks again.

Have a nice Day 

[Section counter]

Hello everyone,

 

I made this simple section counter with scrolltrigger, i am almost there but i miss some points to make it work correctly. The count from "0 to 5" is not even. 

 

Is there a similar topic, answer to this ? 

 

Thanks

Have a nice day

 

See the Pen yLgwOwL by kelligart (@kelligart) on CodePen

[animate element base on their index]

20 minutes ago, OSUblake said:

Is there more than 1 <lottie> component? If so there needs to be an array if you're trying to play each one individually.

Yes, there are several lotties component like in the Codepen. Thanks a lot for your time and code example. I will try to understand and see how i can implement.

 

Thanks a lot

[animate element base on their index]

Here is part of my code:

//In template:
<lottie
          :options="lotties.da"
          class="lottie bg-white absolute top-1/2 -right-full transform -translate-x-1/2 -translate-y-1/2 rotate-3 rounded shadow p-10 opacity-0"
          @animCreated="handleAnimation"
/>

// In DATA: as object
lotties:{
       ux: {
          class: "ux",
          animationData: ux.default,
          loop: true,
          autoplay: false
       },
}

// In mounted:  scrollTrigger

    const lotties = document.querySelectorAll(".lottie");
    gsap.utils.toArray(".skill").forEach((el, i) => {
      let SkillAnim = gsap.timeline({
        scrollTrigger: {
          trigger: el,
          start: "top 70%",
          toggleActions: "play none none reset",
          onEnter: () => this.playLottie(i)
        }
      });
      SkillAnim.from(el, { autoAlpha: 0, y: 20 })
        .to(el, { autoAlpha: 1, y: 0 })
        .to(
          lotties[i],
          {
            right: "-10%",
            autoAlpha: 1,
            duration: 1
          },
          "<"
        )
    });

//In methods:

    handleAnimation: function(anim) {
      this.anim = anim;
    },
    playLottie: function() {
      this.anim.play();
    },
    stopLottie: function() {
      this.anim.stop();
    }

 

[animate element base on their index]

18 minutes ago, OSUblake said:

Where does anim from? According to that code there is only 1 lottie animation, correct?

 

A demo would go a long way and save us both time.

I have many lottie, like the example above.

 

'anim' is the argument from the 'method' function and each lottie in the DOm is like that: 

:options have the path, controller (loop, autoplay..) 

<lottie

:options="lotties.ui"

@animCreated="handleAnimation"

/>

[animate element base on their index]

I dont understand, here is the working codepen:

 

See the Pen JjEewEd by kelligart (@kelligart) on CodePen

[animate element base on their index]

Here is the code, with controller, relative to Lottie:

 

In vue, i call the function ' this.playLottie' from 'methods'

 

methods: {
    handleAnimation: function(anim) {
      this.anim = anim;
    },
    playLottie: function() {
      this.anim.play(0);
    },
    stopLottie: function() {
      this.anim.stop();
    }
  }

 

 

[animate element base on their index]

Hi, thank ou for your time and answer. I  tried this one aready but only the last of the list play. 

 

Here, are the various function that i tried: 

 

//scrollTrigger
onEnter: () => this.playLottie(i)

//scrollTrigger
OnComplete: this.playLottie

//In Timeline
.to(lotties[i],{onComplete: () => {this.playLottie(i);})

//In Timeline
.call(() => {this.playLottie(lotties[i]);})

or

.call((i) => {this.playLottie})

//In timeline
.call(() => (for(let i = 0, i < lotties.lenght, i++){
  this.playLottie(i);
}

 

[animate element base on their index]

Sorry, i have one more question, i feel bad because i should be able to deal on my own but spent all afternoon on this one (for, forEach, el, i, target...).

 

In the code below, almost the same as above, i fire a function with scrollTrigger " onEnter" but only the last animation of the list play. I wish i could fire the function playLottie() everytime it's trigger "... I dont know how to use the Index, target, or el on this case and if i should use .call, . add function instead.

 

Again, many thanks for your help.

Kellig

 

    const lotties = document.querySelectorAll(".lottie");
    gsap.utils.toArray(".skill").forEach((el, i) => {
      let SkillAnim = gsap.timeline({
        scrollTrigger: {
          trigger: el,
          start: "top 70%",
          toggleActions: "play none none reset",
          onEnter: this.playLottie
        }
      });
      SkillAnim.from(el, { autoAlpha: 0, y: 20 })
        .to(el, { autoAlpha: 1, y: 0 })
        .to(
          lotties[i],
          {
            right: "-10%",
            autoAlpha: 1,
            duration: 1
          },
          "<"
        );
    });

 

[animate element base on their index]

Oh Thanks a lot Jack,

 

Your solution is very clear and seems simple, it make sens. I still  need to learn more on parameter such as index, element, target, etc...

I will practice more with this setup. Next time, if i am getting stuck for hours, i will do a codePen. 

 

Thanks again, have a nice Day

Kellig

 

[animate element base on their index]

Hello everyone,

 

How do you animate element base on their index ?

 

I have a div parent ".lottie" with list of lotties child inside. I try to animate them following their index, each time i trigger another element of an array of div".skill".

Trigger A.1 > animate 1 of ".lottie" ... then

Trigger A.2 > animate 2 of ".lottie" ... then

Trigger A.3 > animate 3 of ".lottie"... 

Etc...

 

I used a "add" function() in a gsap timeline, with (for, forEach, stagger) but i can't have the expected result. In the code below, all the lottie appear at once, where i'll like them to appear in a successive order.

 

Does anyone have a clue on this function ? or is there a similar topic ?

 

Thanks in advance

Have a good Day

Kellig

 

    const lotties = document.querySelectorAll(".lottie");
    gsap.utils.toArray(".skill").forEach(el => {
      let SkillAnim = gsap.timeline({
        scrollTrigger: {
          trigger: el,
          start: "top 80%",
          end: "bottom center",
          toggleActions: "play none none reset"
        }
      });
      SkillAnim.from(el, { autoAlpha: 0, y: 20 })
        .to(el, { autoAlpha: 1, y: 0 })
        .add(() => {
          for (let index = 0; index < lotties.length; index++) {
            gsap.to(
              lotties,
              1,
              {
                x: 0,
                autoAlpha: 1,
                stagger: function(index, target) {
                  return target[index++] * 0.1;
                }
              },
              1
            );
          }
        });
    });

 

[In Nuxt.js, need to refresh between pages, for Scrolltrigger to work]

Thanks again   

[In Nuxt.js, need to refresh between pages, for Scrolltrigger to work]

Hi and thanks a lot for this answer, it seems to work !

 

So, i believe that we have to add: " this.tl.progress(0).play()" at the beginning of the timeline in the mounted() hook, if we pause it ?

 

Thanks again Rodrigo for your time and response on this topic 

) .kill();

[In Nuxt.js, need to refresh between pages, for Scrolltrigger to work]

Hello Gsap,

First, you guys are amazing and love every topics of it.

 

Here is my issue:

 

In Nuxt.js, scrolltrigger works perfectly fine on first load but when navigating between pages, i need to refresh the browser everytime for scrolltrigger to work again. 

 

Gsap and scrolltrigger are properly registered and my animation is in a mounted () hook.

 

I believe it is something to do with Scrolltrigger.refresh or update() or kill() with the instances hook of Nuxt.js but cant figure out my head around this problem despite my research. 

 

Is there already a topic covering this issue ? Or you guys have a basic example, line of code on how to prevent this issue ? Someone had a similar situation ?

 

Thanks in advance and have a nice day  

Kellig