Arel

Hi everyone! There's a job opportunity for a frontend developer with experience with GSAP and Angular as a plus. Job entails a full time contract in which the developer will be able to implement GSAP top notch animations for an e-commerce website, combined with the implementation of a few angular components. There's an interesting contract and the animations to implement are really fun. Please feel free to contact me for further details, thank you very much

Nice! Thanks for you help, it worked like a charm

Hi! I am working with an angular application and I have 3 components with scroll trigger animations. So 3 animations in total: 1 - Scroll trigger that pins an image to the scroll (given in the app.component.ts file) 2 - Scroll trigger that pins a text to the scroll and zooms out (given in the hello.component.ts file) 3 - Scroll trigger that increases the height of a div element when the scroll reaches the beginning of the element (given in the footer.component.ts file) The problem I am having is that the 3rd animation is not working correctly when I set the pin to true in animations 1 and/or 2. Somehow it looks like the trigger start of the 3rd animation (footer) is miscalculated so it does not execute when it is supposed to. I have been fighting a lot with it and I don't understand what the issue is. I have developed a stackblitz example to replicate the issue: https://stackblitz.com/edit/angular-ivy-tfumhf?file=src/app/footer.component.ts I would really appreciate your help! thanks a lot

Thanks for the information! Yes, and that was actually it. There was a scroll trigger refresh call, being executed on the AfterViewChecked angular lifecycle event, that was causing the issue. Thanks a lot guys!

So in the demo it is working fine. This gives me the idea that it can be related to something about the context where the animation si located. What is the criteria for the ".pin-spacer" element to be regenerated in the DOM?

Hi! I am sorry, I created a stackblitz example but it works there too ? https://stackblitz.com/edit/angular-ivy-tfumhf?file=src/app/app.component.html Maybe it has to do with something different. The problem is basically that the autogenerated ".pin-spacer" div, keeps regenerating all the time, and I am not sure what could be triggering that regeneration. I attached a video with the weird behavior in the DOM. Untitled.mov

Hi! I am having a problem with the pin feature of the scrollTrigger when using it in angular. The codepen attached shows the desired (correct) behavior. When I implement it in angular, somehow, the pin-spacer element keeps recalculating its attributes in an infinite loop and it causes some weird behavior, I can see the animation taking place but it does not execute smoothly, and some of the elements which are inside the trigger div and have pure css animations, lose their animations too, I believe this is happening because the "pin-spacer" div keeps regenerating automatically: enableScrollTrigger() { const journey = gsap.timeline().to('.flying', 5, { top: 100 }); ScrollTrigger.create({ animation: journey, trigger: '.maka-plate', start: 'top top', scrub: true, pin: true, markers: true }); } ngOnInit() { if (isPlatformBrowser(this.platformId)) { gsap.registerPlugin(ScrollTrigger); this.enableScrollTrigger(); } } //// HTML <div class="container px-0 maka-plate"> <h1 class="text-dark text-uppercase text-center text-lg-big mb-5"> SEAMOS CLAROS <br> <span class="stroked-dark">NO SOMOS CROQUETAS.</span> </h1> <img class="floating dizzy" src="/assets/images/floating-1.png" alt="" /> <img class="flying" src="/assets/images/flying.png" alt="" /> <img class="plate mt-4" src="/assets/images/plate.png" alt="" /> <img class="floating closer dizzy inverse" src="/assets/images/floating-2.png" alt="" /> </div>