As we speak we are going to discover create a fascinating animation utilizing easy CSS and an animation library, like GSAP, to realize a 3D impact by means of fundamental optical illusions. Whereas many of those animations might be crafted utilizing plain CSS, I favor using JavaScript (GSAP) for its effectivity, permitting me to supply the specified results swiftly with only a few strains of code.
Have you ever ever encountered animations that captivate with their smoothness and resemble summary artwork or the fantastic thing about motion? Such animations seize consideration whereas scrolling or browsing the net.
On this transient tutorial, we’ll cowl assemble fundamental HTML with Tailwind CSS to shortly arrange our challenge after which animate components utilizing GSAP.
We’ll divide this instance into three sections: first, the foundational markup; second, the animation itself; and third, the rotation impact that creates the phantasm of 3D notion.
The attitude from which we view a two-dimensional object considerably influences this impact. Transferring ahead, I plan to showcase extra examples utilizing this method, incorporating rotations, perspective, and translations alongside an axis.
To start out, for our base markup, I’ll use Tailwind CSS to swiflty mix HTML and styling in a single cohesive setup:
<important class="bg-black h-screen grid place-items-center text-white">
<part class="w-96 h-96 relative grid place-items-center">
<div class="rounded-full absolute w-full h-full border border-neutral-600"></div>
<div class="rounded-full absolute w-[95%] h-[95%] border border-neutral-600"></div>
<div class="rounded-full absolute w-[90%] h-[90%] border border-neutral-600"></div>
<div class="rounded-full absolute w-[85%] h-[85%] border border-neutral-600"></div>
<div class="rounded-full absolute w-[80%] h-[80%] border border-neutral-600"></div>
<div class="rounded-full absolute w-[75%] h-[75%] border border-neutral-600"></div>
<div class="rounded-full absolute w-[70%] h-[70%] border border-neutral-600"></div>
<div class="rounded-full absolute w-[65%] h-[65%] border border-neutral-600"></div>
<div class="rounded-full absolute w-[60%] h-[60%] border border-neutral-600"></div>
<div class="rounded-full absolute w-[55%] h-[55%] border border-neutral-600"></div>
<div class="rounded-full absolute w-[50%] h-[50%] border border-neutral-600"></div>
<div class="rounded-full absolute w-[45%] h-[45%] border border-neutral-600"></div>
<div class="rounded-full absolute w-[40%] h-[40%] border border-neutral-600"></div>
<div class="rounded-full absolute w-[35%] h-[35%] border border-neutral-600"></div>
<div class="rounded-full absolute w-[30%] h-[30%] border border-neutral-600"></div>
<div class="rounded-full absolute w-[25%] h-[25%] border border-neutral-600"></div>
<div class="rounded-full absolute w-[20%] h-[20%] border border-neutral-600"></div>
</part>
</important>With this setup, our scene will function 17 circles, every stacked atop the opposite, and centrally aligned as follows:
Subsequent, we’ll sort out the animation code. To understand the underlying mechanics, let’s start with an easy strategy.
We are going to choose all divs and transfer them up and down, in addition to change their border coloration. The animation can be smoothed out utilizing a sine easing operate and we’ll set the repeat to -1 to have the animation loop and yoyo to principally reverse the animation as soon as it ends.
gsap.to("div", {
y: -40,
borderColor: "#f87171",
ease: "sine.inOut",
repeat: -1,
yoyo: true
});This animation approach creates the phantasm of 3D depth. When considered from this angle, it would initially appear unrealistic. To reinforce the realism and add a delicate edge, we incorporate a staggered delay for every particular person merchandise. This strategy ensures that every circle animates at a barely completely different time, including depth and a extra dynamic, life like impact to the general animation.
gsap.to("div", {
y: -40,
borderColor: "#f87171",
ease: "sine.inOut",
stagger: { every: 0.05, from: "finish" }
});By implementing a stagger, we observe the emergence of a “wave” impact, as some components delay their begin occasions, ready for his or her flip to be animated. This staggered timing creates a ripple-like movement throughout the set of components, enhancing the visible complexity and attraction of the animation. The ultimate step is to make sure that this animation, together with the stagger impact, loops repeatedly, creating an limitless wave movement:
gsap.to("div", {
y: -40,
borderColor: "#f87171",
ease: "sine.inOut",
stagger: { every: 0.05, from: "finish", repeat: -1, yoyo: true }
});The 3D phantasm is primarily achieved by means of the stagger impact, the place it seems as if every circle is pushing its adjoining, bigger circle up and down, with this movement cascading to the others. The rising and reducing gaps between the circles additional improve this impact, making a dynamic visible that mimics 3D motion.
This idea is much like drawing 3D objects on a flat sheet of paper. In code, the precept stays the identical: we manipulate views, positions, and the association of components inside the viewport to create a way of depth.
To finalize this phantasm, we rotate our container, which on this case is the part. This may be achieved simply with both CSS or Tailwind CSS. Finally, the rotation provides one other layer of depth, making the 3D impact much more pronounced.
part {
rework: rotateX(50deg);
}And there we now have it: the whole GSAP JellyFish optical phantasm.
See the Pen
GSAP Jellyfish by 9 (@ninecodes)
on CodePen.darkish
With these rules we’re in a position to make extra results, if we make the most of properties like scaling, translation and extra:
See the Pen
Drilling Movement by 9 (@ninecodes)
on CodePen.darkish
See the Pen
GSAP Pendulum by 9 (@ninecodes)
on CodePen.darkish
See the Pen
GSAP Pendant by 9 (@ninecodes)
on CodePen.darkish
And that’s it! By means of the strategic manipulation of properties and animations, we will rework easy 2D components into attention-grabbing 3D illusions.
