Feat/entrance

docs/content/2.usage/2.examples.md

@@ -4,157 +4,196 @@ Here you'll find some use-cases and examples. <br />
 [See it in action](/playground)
 
 ## Entrance
+
 [See reference](/usage/modifiers#whenvisible)
 
 ### Basic fade-in from left
+
 ```vue
 <div v-gsap.whenVisible.from="{ opacity: 0, x: -32 }"></div>
 ```
 
 ### Custom start / end
+
 ```vue
-<div v-gsap.whenVisible.from="{ 
-	opacity: 0,
-	start: 'top 50%', 
-	end: 'bottom 50%' 
-}"></div>
+<div
+  v-gsap.whenVisible.from="{
+    opacity: 0,
+    start: 'top 50%',
+    end: 'bottom 50%',
+  }"
+></div>
 ```
 
 ### Entrance only single time
+
 ```vue
 <div v-gsap.whenVisible.once.from="{ opacity: 0, x: -32 }"></div>
 ```
 
+### With `.entrance`
+
+```vue
+<div v-gsap.entrance.slide-left></div>
+```
+
+::alert{type="info"}
+There are multiple presets for entrace [See details](/usage/modifiers#entrance)
+::
+
 ### Debug with markers
+
 ```vue
 <div v-gsap.markers.whenVisible.from="{ opacity: 0, x: -32 }"></div>
 ```
 
 ---
 
-
 ## Magentic
+
 [See reference](/usage/modifiers#magnetic)
 
 ### Basic
+
 ```vue
 <button v-gsap.magnetic></button>
 ```
 
 ### Strong
+
 ```vue
 <button v-gsap.magnetic.strong></button>
 ```
 
 ---
 
 ## Stagger
+
 [See reference](/usage/modifiers#stagger)
 
 ```html
 <ul v-gsap.whenVisible.stagger>
-	<li>Option 1</li>
-	<li>Option 2</li>
-	<li>Option 3</li>
+  <li>Option 1</li>
+  <li>Option 2</li>
+  <li>Option 3</li>
 </ul>
 ```
 
 ---
 
 ## Animate Text
+
 [See reference](/usage/modifiers#animatetext)
 
 ### Using textContent
+
 ```html
 <div v-gsap.whenVisible.animateText>Lorem Ipsum...</div>
 ```
 
 ### Using value
+
 ```html
 <div v-gsap.whenVisible.animateText="'Lorem Ipsum...'"></div>
 ```
 
 ### slow / fast
+
 ```html
 <div v-gsap.whenVisible.animateText.slow>Lorem Ipsum...</div>
 ```
 
 ---
 
 ## Parallax
+
 [See reference](/usage/modifiers#parallax)
 
 ### Slower
+
 ```html
 <div v-gsap.parallax.slower>Lorem Ipsum...</div>
 ```
 
 ### Faster with custom speed
+
 ```html
 <div v-gsap.parallax.faster-5>Lorem Ipsum...</div>
 ```
 
 ---
 
 ## Hover
+
 [See reference](/usage/modifiers#whilehover)
 
 ### Basic
+
 ```html
 <div v-gsap.whileHover.to="{ scale: 1.1 }"></div>
 ```
 
 ### No reverse
+
 ```html
 <div v-gsap.whileHover.noReverse.to="{ scale: 1.1 }"></div>
 ```
 
 ---
 
 ## Differing Mobile / Desktop
+
 [See reference](/usage/modifiers#mobile)
 
 ### Desktop only
+
 ```html
 <div v-gsap.desktop.infinitely.to="{ rotate: '90deg' }"></div>
 ```
 
 ### Desktop + Mobile differing
+
 ```html
-<div 
-	v-gsap.desktop.infinitely.to="{ rotate: '90deg' }"
-	v-gsap.mobile.infinitely.to="{ rotate: '-90deg' }"
+<div
+  v-gsap.desktop.infinitely.to="{ rotate: '90deg' }"
+  v-gsap.mobile.infinitely.to="{ rotate: '-90deg' }"
 ></div>
 ```
 
 ---
 
 ## Draggable
+
 [See reference](/usage/modifiers#draggable)
 
 ### Basic (within parent)
+
 ```html
 <div v-gsap.draggable></div>
 ```
 
 ### Basic (whole body)
+
 ```html
 <div v-gsap.draggable.bounds="'body'"></div>
 ```
 
 ### Horizontal only
+
 ```html
 <div v-gsap.draggable.x></div>
 ```
 
 ### Vertical only (within body)
+
 ```html
 <div v-gsap.draggable.y.bounds="'body'"></div>
 ```
 
 ### Rotation
+
 ```html
 <div v-gsap.draggable.rotation></div>
 ```
 
----
+---

docs/content/2.usage/3.modifiers.md

@@ -199,3 +199,31 @@ You can define presets in `nuxt.config.ts` to make animations reusable.
 [See details](/usage/presets)
 
 ---
+
+## `.entrance`
+
+This is similar to `.preset`, but focuses on predefined entrance animations.
+There are the following options out of the box:
+
+- `.slide-left`
+  - Slides and fades in from left
+- `.slide-right`
+  - Slides and fades in from right
+- `.slide-top`
+  - Slides and fades in from top
+- `.slide-bottom`
+  - Slides and fades in from bottom
+- `.fade`
+  - Simply fades in
+- `.scale`
+  - Fades and scales in from 75% size
+- `.scale-full`
+  - Fades and scales in from 0% size
+
+::alert{type="info"}
+Note: `.entrance` uses `.whenVisible.once` under the hood.
+
+`.once` is needed to ensure animations run through even if scrollTrigger start is passed (e.g. in a hero section)
+::
+
+---