How to Add Animations in JetShip 🚀

Animations can elevate your website's user experience, making interactions feel lively and engaging! In JetShip, adding animations is made simple with the GreenSock Animation Platform (GSAP) library, a powerful library for creating dynamic animations. In JetShip We have used animations in various sections like the hero section, features section, Reviews Section, Pricing Sections to make the website more interactive and engaging. In this article we will cover how you can add stunning animations in your project using GSAP.

Overview of GSAP

The GSAP library is a leading JavaScript library for high-performance, smooth animations across web projects—from basic hover effects to complex dynamic animations. JetShip comes with default integration of GSAP, so you’re ready to animate right away! 🎉

Adding Animations

Let’s look at a few examples of how to integrate animations in JetShip. We’ll begin with a basic example that animates a box when a button is clicked.

Example: Simple Click Animation

In this example, a box will move 100px to the right when you click a button.

<button @click="gsap.to($refs.box, { x: 100, duration: 1 })">
  Animate Box
</button>
<div x-ref="box" class="box">Box</div>

Code Explanation

• @click="gsap.to($refs.box, { x: 100, duration: 1 })": When the button is clicked, this line animates the box element, moving it 100px to the right over 1 second.
• <div x-ref="box" class="box">Box</div>: This defines the box element, which is referenced using x-ref="box" to make it accessible for animation.

NOTE

In JetShip, we have used Alpine.js to control elements for animations. Alternatively, you can also use vanilla JavaScript for element control.

Triggering Animations on Scroll

For scroll-based animations (like fading elements in as they come into view), GSAP’s ScrollTrigger plugin is incredibly useful.

<div x-ref="myBlock" x-data="{}" x-init="() => {
    gsap.from($refs.myBlock, {
        scrollTrigger: {
            trigger: $refs.myBlock,
            start: 'top 80%',
        },
        autoAlpha: 0,
        y: 100,
        duration: 0.5,
        ease: 'power4.out',
    });
}">
  <!-- Content to be animated -->
</div>

Code Explanation

• x-ref="startupJourney": References the element that you want to animate.
• scrollTrigger: Configures a scroll-based trigger for the animation.
  • trigger: $refs.startupJourney: Sets the element itself as the trigger.
  • start: 'top 80%': Begins the animation when the top of the element reaches 80% down the viewport.
• autoAlpha: 0: Sets the initial opacity to 0, making the element invisible initially.
• y: 100: Moves the element 100px down, so it appears to rise during the animation.
• duration: 0.5: Sets the animation duration to 0.5 seconds.
• ease: 'power4.out': Applies a smooth easing effect to make the animation visually pleasing.

This configuration fades in the element and shifts it upward slightly as the user scrolls, creating an elegant reveal effect. 🎬

Conclusion

Using GSAP with Alpine.js in JetShip Laravel Starter kit is a powerful and straightforward way to add engaging animations to your site. These examples cover the basics, but GSAP offers extensive capabilities for even more advanced animations.

For more complex effects, explore the official GSAP documentation.

Happy animating! 🎉