1621649135
GSAP + ScrollTrigger + Locomotive Scroll in Elementor (no PRO needed)
How to add the power of the GSAP and the ScrollTrigger to Elementor? How to add the Locomotive Scroll (or the smooth scroll) on top of these two, and create a killer website?
Check out this video if you are eager to know the answer, and sharpen your Elementor skills.
#elementor #gsap #web-development #wordpress
What is GEEK
Buddha Community
1621649135
GSAP + ScrollTrigger + Locomotive Scroll in Elementor (no PRO needed)
How to add the power of the GSAP and the ScrollTrigger to Elementor? How to add the Locomotive Scroll (or the smooth scroll) on top of these two, and create a killer website?
Check out this video if you are eager to know the answer, and sharpen your Elementor skills.
#elementor #gsap #web-development #wordpress
1620442914
The Smooth, Locomotive Scroll in Elementor - No PRO Needed!
Locomotive Scroll is cool, everyone can tell you that. It helps you turn any bad or boring layout into a piece of art that moves. It brings the excitement of scrolling to the table, regardless of the Browser brand. From now on, it can easily be used in Elementor as well. Create your websites with the simplicity of Elementor, then spice it all up with the smooth scroll, parallax, reveals, and much, much more. Enjoy!
#elementor #web-development #wordpress
1612419704
Steel Bite Pro - Does It Really Work
Steel Bite Pro is an all-trademark improvement that contains a mix of ordinary upgrades to recreate your gums and teeth. Steel Bite Pro teeth care item, The improvement contains 29 unmistakable sustenances that help you with decreasing the gum torture and other dental issues you have been searching for a serious long time.
Visit Official Site:- http://steelbitepro.today/
#steel bite pro amazon #steel bite pro in india #steel bite pro australia #steel bite pro benefits #cost of steel bite pro
1622801360
How to create an awesome Image gallery using GSAP ScrollTrigger
Hello guys, In this article we will learn how to create an awesome Image gallery using GSAP ScrollTrigger
Step 1 — Creating a New Project
In this step, we need to create a new project folder and files(index.html, style.css, main.js) for creating an awesome image gallery. In the next step, you will start creating the structure of the webpage.
Step 2 — Setting Up the basic structure
In this step, we will add the HTML code to create the basic structure of the project.
See Also: Hulk Parallax Scrolling Effect
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>How to create an awesome Image gallery using GSAP ScrollTrigger</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
</body>
</html>
This is the base structure of most web pages that use HTML.
Add the following code inside the <body> tag:
<div class="gallery-container">
<div class="gallery">
<div class="galleryLayer">
<div class="galleryBlock"></div>
</div>
<div class="galleryLayer">
<div class="galleryBlock"></div>
</div>
<div class="galleryLayer">
<div class="galleryBlock"></div>
</div>
<div class="galleryLayer centerPiece">
<div class="galleryBlock centerBlock"></div>
</div>
<div class="galleryLayer">
<div class="galleryBlock"></div>
</div>
<div class="galleryLayer">
<div class="galleryBlock"></div>
</div>
<div class="galleryLayer">
<div class="galleryBlock"></div>
</div>
<div class="galleryLayer">
<div class="galleryBlock"></div>
</div>
<div class="galleryLayer">
<div class="galleryBlock"></div>
</div>
</div>
</div>
In the next steps, we will add the JS library and main.js file
Step 3 — Add Gsap ScrollTrigger library and js file
<!-- Gsap ScrollTrigger-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js"
integrity="sha512-cdV6j5t5o24hkSciVrb8Ki6FveC2SgwGfLE31+ZQRHAeSRxYhAQskLkq3dLm8ZcWe1N3vBOEYmmbhzf7NTtFFQ=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/ScrollTrigger.min.js"
integrity="sha512-Q+G390ZU2qKo+e4q+kVcJknwfGjKJOdyu5mVMcR95NqL6XaF4lY4nsSvIVB3NDP54ACsS9rqhE1DVqgpApl//Q=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<!-- -->
<script src="main.js" charset="utf-8"></script>
Step 4 — Adding Styles for the Classes
In this step, we will add styles to the section class Inside style.css file
* {
padding: 0;
margin: 0;
}
body {
overflow-x: hidden;
}
.galleryBlock {
opacity: 0;
}
.gallery-container {
width: 100vw;
height: 400vh;
position: relative;
}
.gallery {
top: 0;
left: 0;
z-index: 1;
width: 70vw;
height: 60vw;
margin: 0 calc(100vw / 20 * 3);
position: absolute;
}
.galleryBlock {
background-size: cover;
background-color: darkgray;
}
.galleryLayer {
top: 0;
left: 0;
width: 100%;
height: 100%;
position: absolute;
will-change: transform;
transform-origin: 44.951% 50%;
}
.galleryLayer:nth-child(1) .galleryBlock {
top: 5vw;
left: 20vw;
width: 10vw;
height: 10vw;
}
.galleryLayer:nth-child(2) .galleryBlock {
top: 0;
left: 32.5vw;
width: 15vw;
height: 15vw;
}
.galleryLayer:nth-child(3) .galleryBlock {
left: 0;
top: 25vw;
width: 15vw;
height: 15vw;
}
.galleryLayer:nth-child(4) .galleryBlock {
top: 17.5vw;
left: 17.5vw;
width: 30vw;
height: 30vw;
}
.galleryLayer:nth-child(5) {
z-index: 1;
}
.galleryLayer:nth-child(5) .galleryBlock {
top: 20vw;
left: 50vw;
width: 5vw;
height: 5vw;
}
.galleryLayer:nth-child(6) .galleryBlock {
left: 50vw;
top: 27.5vw;
width: 20vw;
height: 20vw;
}
.galleryLayer:nth-child(7) .galleryBlock {
left: 10vw;
top: 42.5vw;
width: 5vw;
height: 5vw;
}
.galleryLayer:nth-child(8) .galleryBlock {
bottom: 5vw;
left: 42.5vw;
width: 5vw;
height: 5vw;
}
.galleryLayer:nth-child(9) .galleryBlock {
bottom: 0;
left: 50vw;
width: 10vw;
height: 10vw;
}
.galleryBlock {
display: block;
position: absolute;
}
@media only screen and (max-width: 580px) {
.galleryLayer:nth-child(6) .galleryBlock {
top: 43.889vw;
left: 73.889vw;
width: 26.389vw;
height: 26.389vw;
}
.galleryLayer:nth-child(7) .galleryBlock {
display: none;
}
.galleryLayer:nth-child(8) .galleryBlock {
display: none;
}
.galleryLayer:nth-child(9) .galleryBlock {
top: 73.889vw;
left: 58.889vw;
width: 15.278vw;
height: 15.278vw;
}
.galleryLayer:nth-child(1) .galleryBlock {
top: 11.111vw;
left: 23.889vw;
width: 15vw;
height: 15vw;
}
.gallery {
margin: 0;
width: 100vw;
height: 89.444vw;
}
.galleryLayer:nth-child(5) svg {
width: 4.722vw;
}
.galleryLayer:nth-child(5) .galleryBlock {
top: 23.889vw;
left: 73.889vw;
width: 15.278vw;
height: 15.278vw;
}
.galleryLayer:nth-child(4) .galleryBlock {
top: 30.278vw;
left: 30.278vw;
width: 39.444vw;
height: 39.444vw;
}
.galleryLayer:nth-child(2) .galleryBlock {
top: 0;
left: 43.333vw;
width: 26.389vw;
height: 26.389vw;
}
.galleryLayer:nth-child(3) .galleryBlock {
top: 30.278vw;
left: 0;
width: 26.389vw;
height: 26.389vw;
}
}
Step 4 — Adding Js Code
In the final step we have to do code for main.js
gsap.timeline({
scrollTrigger: {
trigger: ".gallery-container",
start: "top top",
end: () => innerHeight * 4,
scrub: true,
pin: ".gallery",
anticipatePin: 1
}
})
.set(".galleryBlock:not(.centerBlock)", { autoAlpha: 0 })
.to(".galleryBlock:not(.centerBlock)", { duration: 0.1, autoAlpha: 1 }, 0.001)
.from(".gallery-layer", {
scale: 3.333,
ease: "none"
})
const size = Math.max(innerWidth, innerHeight);
gsap.set('.galleryBlock', { backgroundImage: i => `url(https://picsum.photos/${size}/${size}?random=${i})` });
const bigImg = new Image;
bigImg.addEventListener("load", function () {
gsap.to(".center-layer .centerBlock", { autoAlpha: 1, duration: 0.5 });
});
bigImg.src = `https://picsum.photos/${size}/${size}?random=50`;
Final Result
#html #css #javascript #gallery #gsap #scrolltrigger
1624417462
Parallax Effect using GSAP ScrollTrigger | GSAP Parallax Background Scrolling
Parallax Effect using GSAP ScrollTrigger | GSAP Parallax Background Scrolling
#gsap