Jump to content
Search Community

Scroll Trigger angular issue

Arel test
Moderator Tag

Recommended Posts

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

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!

  • Like 1
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

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? 

  • Like 1
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...