Kelimino

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

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

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

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(); }

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" />

I dont understand, here is the working codepen: https://codepen.io/kelligart/pen/JjEewEd

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(); } }

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); }

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 }, "<" ); });

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

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 ); } }); });

Thanks again

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();

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