Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Prathap

Hello Gsap community i need a clarification about the scrolltrigger plugin in Gsap v3.8 using in Angular 12

Recommended Posts

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

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.

  • Like 1
Link to comment
Share on other sites

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

gsap error.PNG

Link to comment
Share on other sites

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

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

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

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.

 

 

  • 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
  • Recently Browsing   0 members

    • No registered users viewing this page.
×