37 | The most basic usage of ScrollTrigger is to trigger classes based 38 | on the current scroll position. E.g. when an element enters the 39 | viewport, fade it in. You can add custom offsets per element, or 40 | set offsets on the viewport (e.g. always trigger after the 41 | element reaches 20% of the viewport) 42 |
43 | 44 |48 | When using the callbacks ScrollTrigger becomes really powerfull. 49 | You can run custom code when an element enters / becomes visible, 50 | and even return Promises to halt the trigger if the callback 51 | fails. This makes lazy loading images very easy. 52 |
53 | 54 |63 | The easiest way to start is to create a new instance and add some 64 | triggers to it, with all default values. This will toggle the 'visible' 65 | class when the element comes into the viewport, and toggles the 'invisible' 66 | class when it scrolls out of the viewport. 67 |
68 | 69 |
70 | // Create a new ScrollTrigger instance with default options
71 | const trigger = new ScrollTrigger()
72 | // Add all html elements with attribute data-trigger
73 | trigger.add('[data-trigger]')
74 |
75 | // Now in your CSS add the following classes, this
76 | fades the [data-trigger] elements in and out
77 |
78 | .visible, .invisible {
79 | opacity: 0.0;
80 | transition: opacity 0.5s ease;
81 | }
82 |
83 | .visible {
84 | opacity: 1.0;
85 | }
86 |
87 |
88 | 90 | Adding callbacks / different classes can be done globally, this 91 | becomes the default for all triggers you add, or you can specify 92 | custom configuration when adding a trigger. 93 |
94 | 95 |
96 | // Create a new ScrollTrigger instance with some custom options
97 | const trigger = new ScrollTrigger({
98 | trigger: {
99 | once: true
100 | }
101 | })
102 | // Add all html elements with attribute data-trigger, these elements will only be triggered once
103 | trigger.add('[data-trigger]')
104 |
105 | // Add all html elements with attribute data-triggerAlways, these elements will always be triggered
106 | trigger.add('[data-triggerAlways]', { once: false })
107 |
108 |
109 |
110 |
111 | 112 | For more examples, checkout the /demo directory on 113 | GitHub. 114 |
115 |