Jump to content
GreenSock

luisnull666

Is Scroll Trigger working with Ionic 6?

By luisnull666, in GSAP. Views: 2,675

Moderator Tag

Recommended Posts

  • luisnull666 changed the title to Is Scroll Trigger working with Ionic 6?
Posted

I'm completely unfamiliar with Ionic, sorry, but this looks very strange to me in your ScrollTrigger settings:  

start: "top top",
end: "bottom bottom"

Did you realize that's telling it to START when the top of the box hits the top of the viewport...and end when the bottom of the box hits the bottom of the viewport? In your example, that doesn't really make any sense because the box is smaller than the viewport, so by the time it starts (top hits the top), the bottom is already way past the bottom. See what I mean? 

 

Perhaps you meant:  

end: "bottom top"

? 

 

But as for Ionic, you'd have to provide a minimal demo. From what I can tell, your Stackblitz link doesn't use Ionic, right? 

  • Like 3
Link to comment
Share on other sites
Posted
1 hour ago, OSUblake said:

 

Ionic uses a nested container for scrolling, so you will probably have to use a reference to that container for the trigger.

https://greensock.com/docs/v3/Plugins/ScrollTrigger/trigger

 

Yep, or perhaps the "scroller" if that's the thing that's doing the scrolling: https://greensock.com/docs/v3/Plugins/ScrollTrigger/scroller

 

Oh, and in my earlier message I said you may have meant end: "bottom top" but actually if you wanted to have the box fade in when it enters the viewport, you'd set the start: "top bottom" and then if you want it to fade out at the top, you could do end: "top top"

  • Like 1
  • Thanks 1
Link to comment
Share on other sites
  • Author
Posted
3 hours ago, OSUblake said:

 

Ionic uses a nested container for scrolling, so you will probably have to use a reference to that container for the trigger.

https://greensock.com/docs/v3/Plugins/ScrollTrigger/trigger

 

When you say that i need to use a reference to the container for the trigger you mean that i need to specify a component and give it the values of a trigger? 

https://stackblitz.com/edit/angular-ionic-gsap?file=src/app/pages/index/index.page.ts

Would please help me?, here is a stackblitz with Anguar, ionic and the example with gsap scroll trigger & the issue.

Link to comment
Share on other sites
  • Author
Posted
1 hour ago, OSUblake said:

You should probably use the scroller property instead.

https://greensock.com/docs/v3/Plugins/ScrollTrigger/scroller

 

Just need to figure out which element is doing the scrolling.

 

image.png.89ab7f6b983b71fe0e516d89f260e5be.png

 

Sorry, but i don't get it... who should have the trigger? ion-app?, the issue that i'm seeing is  that the elements inside the container are not getting the triggers as it should be...  

https://stackblitz.com/edit/angular-ionic-gsap?file=src/app/pages/index/index.page.html

Link to comment
Share on other sites
Posted

@luisnull666 I'm completely unfamiliar with Ionic - how would you reference the element that has the scrollbar that would move in that context (the scroller)? I assume there's something with Ionic that delays "hydration" and won't allow you to reference those elements until a certain lifecycle event/callback is fired(?) The point is that you should wait until those elements actually exist, and then create your ScrollTrigger and set its "scroller" property to that element (the one that has the scrollbar on it). 

  • Like 1
Link to comment
Share on other sites
  • 1 month later...
Posted

Did you find a solution?

 

From what I understand of ionic we have at least 2 problems.
1) it uses a sort of virtual dom and the main.inner-scoll element is rendered inside the virtual dom.

2) the element to whom the scroll is applied is the ion-content element

 

An almost working solution is to pass the event detail to a class property 

 

In the ion-content tag we can use [scrollEvents]="true" and (ionScroll)="logScrolling($event)" to pass to the method the scroll event.

logScrolling(ev){
      this.scroll = ev.detail
    }

 

then we have a getter function to retrieve the value

getScroll(){
      if(!this.scroll){
        return {scrollTop:0}
      }
      return this.scroll
    }

 

finally we can use ScrollTrigger.scrollerProxy in this way

 

initAnimations(){
      gsap.registerPlugin(ScrollTrigger);
      const scrollProxy = document.getElementsByTagName('ion-content').item(0)
      const self = this
      
      ScrollTrigger.scrollerProxy(scrollProxy, {
        scrollTop(value){            
          return self.getScroll().scrollTop ;    // getter
        },
        getBoundingClientRect() {
          return {top: 0, left: 0, width: window.innerWidth, height: window.innerHeight};
        }
      });
 
      gsap.to('#imgAnimate',{
        scrollTrigger:{
          trigger:'#imgAnimate',
          start:"top center",
          markers:true,
          toggleActions:"restart pause reverse pause",
          scroller:scrollProxy
        },
        rotation:360,
        duration:3
      })
    }

 

the initAnimations function needs some work but at least is working.

 

Sorry for my english I hope this could be of some help.

 

 

  • Thanks 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.
×
Login Create Account