Jump to content
Search Community

DodgyP

Members

  • Posts

    3

  • Joined

  • Last visited

 Content Type 

Posts posted by DodgyP

    Angular + GSAP + ScrollSmoother

    in GSAP

    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

    Angular + GSAP + ScrollSmoother

    in GSAP

    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.

    Angular + GSAP + ScrollSmoother

    in GSAP

    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>

     

×
×
  • Create New...