Jump to content
Search Community

DodgyP

Members

  • Posts

    3

  • Joined

  • Last visited

 Content Type 

Everything posted by DodgyP

  1. DodgyP
    @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.
  2. DodgyP
    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.
  3. DodgyP
    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...