Jump to content
Search Community

Angular + GSAP + ScrollSmoother

DodgyP test

By DodgyP
in GSAP

Moderator Tag
 Share
Go to solution Solved by GreenSock,

Recommended Posts

DodgyP test

DodgyP

Posted
Posted

Hi.

All other plugins are working fine - but ScrollSmoother refuses to work within the Angular project I'm working on. I've tried to use custom wrapper
+ content, I've tried to move the wrapper + content inside the actual component to test it out to see if it would work *at all*, but no luck.

I'm not sure what I'm doing wrong. I am receiving no error message - but as shown in the ///routed-content HTML, I have the attributes for each

item set, but they all move together in unison.

 

I am really needing some help here as I can't quite figure out why ScrollSmoother won't work and I don't want to animate parallax enter/exit

via ScrollTrigger, but I may have to resort to that since I don't even know where to begin with getting ScrollSmoother to work.


I've seen all examples of ScrollSmoother and read through the forum, and I've seen examples where ScrollSmoother works within nested divs -
Please help here!

  


    gsap.registerPlugin(DrawSVGPlugin, SplitText, TextPlugin, ScrollTrigger, ScrambleTextPlugin, ScrollSmoother);
    
    this.smoother = ScrollSmoother.create({
      content: "#smooth-content",
      wrapper: "#smooth-wrapper",
      smooth: 2,
      effects: true,
      normalizeScroll: true,
      ignoreMobileResize: true,
    });

 

 
 
 
  
////index.html
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Test</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <div id="smooth-wrapper">
    <div id="smooth-content">
      <app-root>
      	//routed content appears here.
      </app-root>
    </div>
  </div>
</body>
</html>


////routed-content
<h1 data-speed="auto">
    Build.
</h1>
<h1 data-speed="0.5">
    Deploy.
</h1>
<h1 data-speed="0.3">
    Repeat.
</h1>

 

Link to comment
Share on other sites
Rodrigo test

Rodrigo

Posted
Posted

Hi @DodgyP and welcome to the GreenSock forums!

 

First thanks for being Club GreenSock member and supporting GreenSock!

 

I'm not at all familiar with Angular so I couldn't tell you about this. Can you please create a minimal demo in Stackblitz using the Angular template, then add GSAP (gsap-trial) to the dependencies and show in the simplest possible way your setup:

https://stackblitz.com/

 

For adding gsap-trial just type gsap-trial in the section for adding a new package to the bottom left of the screen:

WUt6paX.png

 

Also make sure to run your ScrollSmoother create method when you are completely sure that the elements with the data-speed attributes are added to the DOM. They could be added the ScrollSmoother create method runs.

 

Happy Tweening!

  • Like 1
Link to comment
Share on other sites
DodgyP test

DodgyP

Posted
  • Author
Posted
14 hours ago, Rodrigo said:

Hi @DodgyP and welcome to the GreenSock forums!

 

First thanks for being Club GreenSock member and supporting GreenSock!

 

I'm not at all familiar with Angular so I couldn't tell you about this. Can you please create a minimal demo in Stackblitz using the Angular template, then add GSAP (gsap-trial) to the dependencies and show in the simplest possible way your setup:

https://stackblitz.com/

 

For adding gsap-trial just type gsap-trial in the section for adding a new package to the bottom left of the screen:

WUt6paX.png

 

Also make sure to run your ScrollSmoother create method when you are completely sure that the elements with the data-speed attributes are added to the DOM. They could be added the ScrollSmoother create method runs.

 

Happy Tweening!



Hi Rodrigo, thanks for your reply.

You're welcome, Greensocks is a great library that makes a lot of features easily created.

I've created a minimal demo, please find the link attached below:
https://angular-ivy-sdgyro.stackblitz.io

Currently the editor throws one of two errors - "c.content is not a function" or it says "l is not a variable", followed by a series of warning message that this is a trial module for ScrollSmoother.


These errors do not pop up in my project.

I'd also like to add, when using the ES modules, ScrollSmoother object is empty (see console.log(this.scroller)), but when using the UMD modules, this same console.log command produces a real ScrollSmoother object. Unfortunately when using the UMD modules, it doesn't allow the page to scroll and upon any resizing of the window, it throws an "n is undefined" error.

Link to comment
Share on other sites
DodgyP test

DodgyP

Posted
  • Author
Posted

@Rodrigo

Hi Rodrigo, I found out what the issue was. Or at least I have found the root of the problem and will be able to accommodate the fix in the future.

Essentially what is happening is that by intializing ScrollSmoother in my app component (which is created before any page is created), ScrollSmoother recognizes that NO elements have data-speed or data-lag. The fix is to initialize ScrollSmoother with ScrollSmoother.create in each individual page, which seems counter intuitive.

I found the answer within this forum post


Understanding that both React and Angular use a component like architecture to essentially "emit" HTML into a main container within the app's root component, I had an inkling that someone using React would've faced a similar issue so I broadened my search to not only include Angular problems with ScrollSmoother, but also with React problems.

I want to sincerely thank you for taking the time to answer, and I hope you have a great day.

  • Like 1
Link to comment
Share on other sites
  • Solution
GreenSock test

GreenSock

Posted
  • Solution
Posted

Great job finding a solution, @DodgyP. Yeah, I forked your demo and added some console.log() calls: 

https://stackblitz.com/edit/angular-ivy-btr5ga?file=src%2Fapp%2Fhome%2Fhome%2Fhome.component.ts,src%2Fapp%2Fapp.component.ts

 

What this showed was:

  1. When you create you ScrollSmoother, there are no child elements so none of the data-speed stuff can be found. 
  2. The Angular app creates an additional wrapper element so that the #smooth-wrapper is NOT a child of the <body>. You could consider making the root Angular app the wrapper, and just put a #smooth-content inside that (skip the #smooth-wrapper). It may work to leave that...I'm just saying if you want to minimize things you could do it. 
  3. ScrollSmoother sets a height on the <body> but the hot reloading feature on Stackblitz (and probably local setups) wipes that out on subsequent hot reloads, making the page appear to not be scrollable. If you hit the refresh button, it resolves it (until you make a change the triggers a hot reload). This is a problem with hot reloading and/or Angular, not ScrollSmoother. 
  4. If I wait for the sub-content to render (I did a setTimeout(..., 50)), it's possible to add the effects at that point. You certainly shouldn't need to re-create your ScrollSmoother on every single sub-element. 

I hope that helps. 

  • 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
 Share
Go to topic listing

  • Recently Browsing   0 members

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