Prathap Posted October 22, 2021 Share Posted October 22, 2021 As i was using the angular 12 to build the webapp i'm trying to use the scroll trigger animation in my project, the thing is the initial animation is working fine. But when it comes to ScrollTrigger in doesn't works in angular. I dont know why... I want to target a particular class in HTML to animate it using the scrolltrigger plugin Link to comment Share on other sites More sharing options...
OSUblake Posted October 22, 2021 Share Posted October 22, 2021 Welcome to the forums @Prathap ScrollTrigger works fine in Angular. If you need help seeing what the issue is, please make a minimal demo on CodeSandbox. 1 Link to comment Share on other sites More sharing options...
Prathap Posted October 22, 2021 Author Share Posted October 22, 2021 How to target a class using scrolltrigger in Angular 12, please help me. Like in this image, I'm trying to target a text which class is named as "beginner-txt", trying to animate it using scrolltrigger. But it doesn't Link to comment Share on other sites More sharing options...
OSUblake Posted October 22, 2021 Share Posted October 22, 2021 If you need help, please provide a minimal demo showing the issue. There are a bunch of different ways to select elements in Angular... https://stackoverflow.com/a/35209681/2760155 1 Link to comment Share on other sites More sharing options...
Prathap Posted October 22, 2021 Author Share Posted October 22, 2021 See the Pen QWMdLwy?editors=0010 by prathap_gl (@prathap_gl) on CodePen this is the codepen of my project. I'm trying the trigger the text class for scrolling animaiton, but it doesn't works. Please give me a solution Link to comment Share on other sites More sharing options...
OSUblake Posted October 22, 2021 Share Posted October 22, 2021 Your GSAP code is valid, but you can't do a scrolling animation if there are no scrollbars. ScrollTrigger works by scrolling. But I don't know if that is your issue because you didn't provide a demo showing the issue. See the Pen wvqgwxW by GreenSock (@GreenSock) on CodePen Link to comment Share on other sites More sharing options...
Prathap Posted October 23, 2021 Author Share Posted October 23, 2021 Finally i found why Scrolltrigger doesnt work with me.... Becoz the main content in inside the mat-sidenav-content... So that it doesnt works. Is there any solution for implementing the scrollTrigger inside the mat-sidenav-content Link to comment Share on other sites More sharing options...
OSUblake Posted October 23, 2021 Share Posted October 23, 2021 If that's a different scrolling element than the main window, you would need to use the scroller property. Quote scroller String | Element - By default, the scroller is the viewport itself, but if you'd like to add a ScrollTrigger to a scrollable <div>, for example, just define that as the scroller. You can use selector text like "#elementID" or the element itself. 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now