Usage - ScrollTrigger

Setup

There is no special syntax needed to use ScrollTrigger with Glaze. Since it is defined inside the scrollTrigger property of the animation object, dot notation can be used to adjust its settings.

                <div class="animate-from:opacity-0|scrollTrigger-&"></div>
    
                    

                Copy
                
                                 
            
            

In the example above, the scrollTrigger property is set to the current element by using the & symbol. This means that the animation will start when the element comes into view.

Nested properties

Since the scrollTrigger property is a nested object, it is possible to use dot notation to adjust its settings.

                <div class="animate-from:opacity-0|scrollTrigger.start-top|scrollTrigger.trigger-&"></div>
    
                    

                Copy