Jump to content
Search Community

Using gsap timeline in SPA web

David Carrio Ricardo test
Moderator Tag

Recommended Posts

Hi,

 

Im not sure if you can help me. Im a begginer using Angular, im building a SPA web to practice, and im using gsap timeline for a simple animation, showing up some elements on the scroll event. If i code this in a single html, css and js; it works perfectly. The problem is when im integrating the timeline in angular project.

Im using the ScrollTrigger in the 'about' component, but when i press a button that change the route, and load another component, and then when i go again into  the 'about' component, the animations are broken, divs are displaced and it doesn`t work. 

 

After hours looking for the reason, i have seen that when you are using the property pin: true, it creates a div with class="pin-spacer" , and its the element that creates the padding needed for the animation. But i also realized that after changing of component and turning back to the page when the ScrollTrigger is implemented, the with, height and padding, they change and displace the elements of the animation. 

 

I know that the right way would be sharing a codepen minimalistic example, but as i said, the issue happens when i change the route and navigate on my components, so i actually can`t figure out any other way to ask for help. I`ll upload the folder with my project, so you only have to execute ng-server,  and will share with you some screenshoots of the main code.

Angular-project:  https://drive.google.com/drive/folders/10owYpOKUtSJrXOp4aJvVwClG07f-w8Qv?usp=sharing

 

Any kind of help is welcome, and thank you for taking the time, and allow me to learn from you.

trigger1.pngtrigger2.png

See the Pen by edit (@edit) on CodePen

Link to comment
Share on other sites

Hey David.

 

Try killing off the ScrollTrigger in the ngOnDestroy:

ngOnDestroy(): void {
  this.trigger1.scrollTrigger.kill();
  this.trigger.kill();
  this.trigger2.scrollTrigger.kill();
  this.trigger2.kill();
}

 

Side note: if someone resizes your page after its loaded then the tween's values will no longer match the viewports width. If you want to avoid that, you could make them functional values (like x: () => innerWidth * -1)  and set invalidateOnRefresh: true in the ScrollTrigger vars.

  • Like 1
Link to comment
Share on other sites

36 minutes ago, ZachSaucier said:

functional values (like x: innerWidth * -1)

Hi, first of all thanks for your response, it´s really apreciated.

As you can see in the screenshots, i think im using funtional values. Are quite simple animations based on moving elements.

I tried using this variable in the ScrollTrigger vars, invalidateOnRefresh: true , but afters using it, the timeline did nothing and only shows the background of the div. It´s 97.2% that im using it wrong. 

Furthermore, after killing the scrollTriger and the timeline, nothing changed. In my code, i debug trigger1 and trigger 2 with console.log(), and there you can see as after the kill() method, the object exist still, so it isnt destroyed. Also as a relevant information, if you change the route, but press the Go Back button in the navigator, animations work fine.

 

invalidateOnRefresh.png

Link to comment
Share on other sites

5 minutes ago, David Carrio Ricardo said:
1 hour ago, ZachSaucier said:

functional values (like x: innerWidth * -1)

As you can see in the screenshots, i think im using funtional values.

Oops, sorry, I forgot the () => part that makes it a function 🤦‍♂️ I fixed it now.

 

It's a big ask to get us to download your ZIP and get the project working locally. Could you try getting it working using a site like CodeSandbox or StackBlitz?

Even just linking to a live version of the output would be helpful because we'd get to see the behavior that you're talking about. 

  • Like 1
Link to comment
Share on other sites

Hello, thank you once again for your quick response and the advice, i didnt know a usefull site like StackBlitz. 

Here is the link of the project:   https://stackblitz.com/edit/angular-ivy-jpynms

However, there is an error, that is more like an angular based issue, not related with ScrollTrigger or Gsap, but again, i beg for your help because i dont know what is the reason, and im pretty sure that once this error is solved, the web will be runnig right on StackBlitz. 

types.jquery.png

Link to comment
Share on other sites

4 hours ago, David Carrio Ricardo said:

Here is the link of the project:   https://stackblitz.com/edit/angular-ivy-jpynms

Okey Zach, its ready now. Please ignore the fact that images dont load, positioning is really bad and when you open the menu, only take in consideration the buttons and not the bugs that were gererated when migrating the project to Stackblitz, im not used to it, not yet.

 

Now you can SEE the problem by yourself ( haha, and forgive me for bother you like this), hope you can find any error that i cant see.

See you soon.

Link to comment
Share on other sites

2 hours ago, David Carrio Ricardo said:

Here is the link of the project:   https://stackblitz.com/edit/angular-ivy-jpynms

Of course i can, now you got it reduced as much as i could. To navigate just click on the links.

I rewind, the error takes place when you change the route and load Projects using the menu, and then you click About. When you do that the animations stop working fine. 

Hope its more readable now, and i apologize for not making it clearer earlier. 

  • Like 1
Link to comment
Share on other sites

Thanks so much for doing that!

 

I notice that when I go to the projects page and then back to the about page that if I resize the browser it fixes itself. That makes me think that if you call ScrollTrigger.refresh(); after the About page has been loaded fully the when navigated back to it will work.

 

Adding the following is a hacky work around that seems to work for me:

gsap.delayedCall(1, () => ScrollTrigger.refresh());

The proper way to do it would be to use a callback once everything is loaded. Do you know what that might be in Angular?

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

Well, i have another problem. I could create a new topic, but as you already know (more or less) my angular project, i thoughti could ask here.

 

It most be a very simple Newbie error, im sure you will find it soon.

Here is the project:  https://stackblitz.com/edit/angular-ivy-jpynms

 

The only changes are:

      -I added a div in app.component.html, with a color background and a text.

      -I added a new ScrollTrigger in app.component.ts (very simple one), to make this new div appear.

Well it sounds trivial, but only this change is causing an error in the first animation.

Look at the project and you will find out the error, the new ScrollTrigger i created is popping up in the middle of the first one, and i cant understand why.

 

Once again, thank you for your help.

Link to comment
Share on other sites

Hey David. In general ScrollTriggers should be created in the order in which they are to be ran on the page. This is because when you pin an element, additional space has to be added. So if the space is added before an element whose ScrollTrigger is already created, the start and stop positions for that ScrollTrigger will no longer be accurate. My guess is that this is your issue. 

 

To remedy this, you could try to make sure the ScrollTriggers are created in the order in which they should fire. In the latest beta of ScrollTrigger (3.4.1) we added an additional property to help with this called refreshPriority. The higher the refreshPriority, the sooner the ScrollTrigger will be created (regardless of the order of when you initialized the ScrollTrigger). You can replace the ScrollTrigger version that you're using with that beta file, order your ScrollTriggers using refreshPriority, and see if it works for you.

  • Thanks 1
Link to comment
Share on other sites

  • 3 weeks later...

Hey, i have a problem with the components of my app wich implement ScrollTrigger.

Components by theirself are working fine. What i want is my component to be hidden until the cursor hovers a title. Then it must show up, making the ScrollTrigger animation. For this im encapsulating the component into a div, wich by default has display: none. When you hover the title, it adds a class that change the display to block. Well, when i do this, the component ScrollTrigger just doesnt work. However if i use visibility: hidden/visible instead of display: none/block, component works perfectly, but this is not a solution for me. because i dont want the component to take any space.

I think this is caused because the trigger dont have enough time to load, so i tried reducing the time of  delayedCall, without success. 

gsap.delayedCall(1, () => ScrollTrigger.refresh());

Here is my app link reduced:  https://stackblitz.com/edit/angular-ivy-pka15o

 

Thanks for your atention.

Link to comment
Share on other sites

Hey David. In order for ScrollTrigger to set itself up correctly the elements need to be in their final position and sizing. The reason why your delayedCall doesn't work is because it is ran when the page loads, not when the component is shown. 

 

Just call ScrollTrigger.refresh() after you add the class:

showComponent(component: any){
  component.classList.toggle('display-block');
  ScrollTrigger.refresh();
}

I will say that this is very weird and unexpected UX behavior...

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

Hi Zach, once again you solved my problem. Thank you.

14 minutes ago, ZachSaucier said:

I will say that this is very weird and unexpected UX behavior...

Yeah i have to admit its pretty weird, but i think the final result will be good. If you dont care, i would like to show it to you when its in live.

 

See you soon ;) 

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...