Arel Posted September 10, 2020 Share Posted September 10, 2020 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> See the Pen poyrrrL by arelsirin (@arelsirin) on CodePen Link to comment Share on other sites More sharing options...
GreenSock Posted September 10, 2020 Share Posted September 10, 2020 Sorry to hear about the trouble, @Arel. And welcome to the forums. I'm not much of an Angular guy, sorry. It is super tough to troubleshoot blind, though - can you provide a minimal demo that shows the problem? Perhaps in https://codesandbox.io/ or https://stackblitz.com/? That'd significantly increase your chances of getting a useful answer. Seeing it work in Codepen.io doesn't really help because...well, it works. Happy tweening! 1 Link to comment Share on other sites More sharing options...
Arel Posted September 10, 2020 Author Share Posted September 10, 2020 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 Link to comment Share on other sites More sharing options...
ZachSaucier Posted September 10, 2020 Share Posted September 10, 2020 I'm not seeing that behavior at all in the StackBlitz link that you sent. Does it not work for you in that demo? Anything else you can tell us about how to recreate the issue? Link to comment Share on other sites More sharing options...
Arel Posted September 10, 2020 Author Share Posted September 10, 2020 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? Link to comment Share on other sites More sharing options...
GreenSock Posted September 10, 2020 Share Posted September 10, 2020 6 minutes ago, Arel said: What is the criteria for the ".pin-spacer" element to be regenerated in the DOM? It's only created once (when you create the ScrollTrigger), but it gets removed and added back to the DOM during a refresh(). It's removed so that all the measurements can be taken properly (in the page's natural state). In your demo, is your code that creates ScrollTriggers running a bunch of times or something? 1 Link to comment Share on other sites More sharing options...
Arel Posted September 10, 2020 Author Share Posted September 10, 2020 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! 1 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