Vue allows developers to write more flexible and reusable code by giving them more options for how they organize their components. One area where this can be particularly useful is in creating animations. In this article, we’ll look at how to use the Composition API to create animations in Vue using both CSS and the JavaScript animation library GSAP (GreenSock Animation Platform).
First, let’s take a look at how to create animations using CSS. To do this, we’ll use the v-bind directive to bind a CSS class to an element, and then use CSS keyframe animations to create the animation. Here’s an example of how this might look in a Vue 3 component:
In this example, we have adiv element with a class of "fade". We bind class "in” or "out” .by toggle animationStarted value with click event. then the keyframe animation start, which fades in or out of the text with an easing effect.
here is another example of how we can animate elements using transition and v-bind class.
In this example, we have an img element with a class of “fadeIn”. We bind the class "active” .by toggling animated value with the click event. then we bind the animated value in style with opacity while animated is Boolean which means the value is 1 or 0.
let’s go deeper and use more than one event
In this example, we have a Vue template with an image element that has mousemove and mouseleave event listeners. When the mouse is moved over the image, the getMousePos function is called, which calculates the position of the mouse relative to the center of the image and updates several reactive variables. These variables are then used to apply transformations to the image, such as rotating it around the X and Y axes and applying a drop shadow with a color that is based on the position of the mouse. When the mouse leaves the image, the resetPos function is called to reset the reactive variables to their initial values. The CSS for the image element uses the reactive variables to apply the transformations and drop shadow effect.
here is another example using mousemove event :
In this example, we are creating a spotlight effect on an image. The spotlight is created using a radial gradient, and its position is controlled by the user’s mouse movements. The spotlight effect can be toggled on and off with a button. This is achieved using the Teleport component in Vue, which allows us to move the spotlight to a different part of the DOM without having to use complicated CSS positioning. The position of the spotlight is stored in reactive variables using the ref(), and the mouse movement is tracked using the @mousemove event. The spotlight is styled using CSS, with the opacity and position being controlled using transitions.
Now, we will create more Advance Animation using GreenSock Animation (GSAP) is a powerful animation library for creating complex and smooth animations. allow developers to create rich and engaging user interfaces with dynamic animations.GSAP provides a wide range of features for animating HTML elements, such as timeline management, easing functions, and physics-based animation. It is also highly performant and can animate elements smoothly even on low-powered devices.
To use GSAP with Vue, you can install the lib using npm npm install gsap,For this example, we will animate the hero section titles and the image using GSAP.
In this example, we used the GSAP library to create animations in a Vue.js application. We imported the gsap and ref functions from Vue.js, which allow us to create reactive data and access elements in the DOM. We then created a revealUp ref that references the image we want to animate. The animateImage function uses the gsap.fromTo method to animate the image by changing its propsopacity, clipPath, autoAlpha, scale, delay, duration, and ease.
Similarly, the animateInfo function animates the text elements by using the gsap.timeline method to create a timeline of animations for each element with a revealUp class. The timeline uses the fromTo method with the stagger option to add a staggering effect to the animation.
Stagger is a feature in the GreenSock Animation Platform (GSAP) that allows you to create sequential animations with a time delay between each element. This is useful when you want to animate a group of elements in a specific order, but you don’t want them all to start at the same time.
Finally, we use the onMounted hook to call the animateImage and animateInfo functions when the component is mounted, so that the animations are executed as soon as the component is rendered.
Next, Let’s create a custom directive in Vue.js for using GSAP.
In this example, we created a custom Vue directive called vGsap that allows us to bind animations to HTML elements based on certain events, such as mouseenter, click, etc.
First, we imported the gsap library. We defined sample three different animation functions for testing - animateRevealDown, animateRevealLeft, and animatePulseRingEffect - each with its own timeline, defining how the elements should animate.
Next, we created the vGsap directive, which takes two arguments: the element to animate and the animation to use. It sets up an event listener on the specified event and triggers the animation when that event occurs. If the event is mouseenter, we also set up an event listener for mouseleave and use the gsap.to method to animate the element back to its original state when the mouse leaves the element.
Finally, we used the v-gsap directive in the template to animate the elements. We passed in an object that specifies the event to listen for and the animation to use for each element we want to animate.
Overall, this custom vGsap directive allows us to easily create and control animations in Vue by simply adding an attribute to the desired HTML element, making it a useful tool for front-end developers to add engaging and dynamic effects to their web applications.
Now, we’ll dive deeper and explore how to use 3D Modal in Vue.js applications. 3D graphics can be used to create immersive and engaging user experiences, and Vue.js with its component-based architecture provides an ideal framework for building such applications. We’ll use Trois.js, a library that makes it easy to integrate Three.js, a popular 3D graphics library. We’ll look at how to create and manage 3D scenes, models, and animations, and how to customize them to meet specific needs.
With Trois.js, developers can build sophisticated 3D applications that are reactive and interactive, using familiar Vue.js concepts such as props, events, and lifecycle hooks. The library includes a wide range of pre-built components, including lights, cameras, models, and post-processing effects, that can be easily added to a Vue.js application and customized to meet specific needs.
we’ll explore how to create a dynamic and interactive image effect. By the end of this example, you’ll have a good understanding of how to create dynamic and interactive image effects using Vue.js and Three.js. You’ll also learn how to use the troisjs library to work with Three.js in a Vue.js application.
In this example, The template starts with a <Renderer> component, which creates a WebGL renderer that will render the 3D scene. The renderer is configured with various properties, including width and height, settings for an alpha, antialias, orbit control, and shadows. Inside the renderer, there is a <Camera> component, which sets the initial camera position. This is followed by a <Scene> component, which represents the 3D scene.
The scene includes NoisyImageThe main focus of this example is on the <NoisyImage> prebuilt component, which will create a noisy and animated version of an image. We used various props to control the animation, such as time-coef, noise-coef, and z-coef.
:disp-coefcontrols the displacement effect of the image.:noise-coefcontrols the amount of noise applied to the image.:time-coefis a coefficient that affects the time factor of the noise texture applied to the image:z-coefis a coefficient that affects the z-axis displacement of the noise texture applied to the image- We also used the
@pointerOverand@pointerLeaveevents to trigger different animation states when the user interacts with the image.
To create the animation, we used the gsap animation library to tween the values of certain props. This allows us to transition between different animation states based on user input smoothly.
Now, we explore how to use troisjs to create a 3D scene with a model loaded from an external file.
In this example, the difference is only that The scene includes an <AmbientLight> component, which provides general illumination to the scene, and a <PointLight> component, which creates a specific point of light. Both lights are set to cast shadows.
Finally, the scene includes a <GltfModel> component, which loads a 3D model from the specified src file. When the model is loaded, the onReady callback function is called. This function sets up an AnimationMixer that will animate the model and starts the animation by playing the first animation clip. A Clock is also set up to keep track of the animation time.
Finally, the updateMixer function is called on each frame render, which updates the AnimationMixer by calling its update method with the time elapsed since the last frame.
mixer.value.update is called on every frame render and takes as input the time elapsed between the current and previous frame, which is calculated by clock.value.getDelta(). This method call updates the mixer state based on the elapsed time and is required for the animations to play smoothly in the scene.
And voila! 🎉 we have successfully embedded a 3D model onto our website.
Thanks for your time reading this article on Vue Animations. We hope that you have found it helpful and informative and that it has inspired you to try out some of the techniques and tools discussed here in your own Vue projects. By unlocking the power of animations in Vue, you can create more engaging and dynamic user interfaces that enhance the user experience and make your applications stand out. With the flexibility of the Composition API and the power of GSAP, the possibilities are endless. Happy animating!
Usfule Links :
