Hardward Accelerate Mask Reveal

Developer
Peter Hrynkow
Size
2,083 Kb
Views
28,336
  1. Hardward Accelerate Mask Reveal Previews
  2. Hardward Accelerate Mask Reveal HTML Codes
  3. Hardward Accelerate Mask Reveal CSS Codes
  4. Hardward Accelerate Mask Reveal JS Codes

How do I make an hardward accelerate mask reveal?

What is a hardward accelerate mask reveal? How do you make a hardward accelerate mask reveal? This script and codes were developed by Peter Hrynkow on 14 September 2022, Wednesday.

Hardward Accelerate Mask Reveal Previews
IQ Test

Hardward Accelerate Mask Reveal - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Hardward Accelerate Mask Reveal</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="box"> <img src="http://placehold.it/720x540" class="box__img">
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenMax.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Hardward Accelerate Mask Reveal - Script Codes CSS Codes

.box { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; overflow: hidden; will-change: transform;
}
.box img { will-change: transform; display: block;
}

Hardward Accelerate Mask Reveal - Script Codes JS Codes

var box = document.querySelector('.box');
var boxImg = document.querySelector('.box__img');
TweenMax.fromTo(box, 1, { scaleX: 0,
}, { scaleX: 1, repeat: -1, yoyo: true, ease: 'Cubic.easeInOut', onUpdate: function() { boxImg.style.transform = 'scaleX(' + (1 / box._gsTransform.scaleX) + ')' }
});
Hardward Accelerate Mask Reveal - Script Codes
Hardward Accelerate Mask Reveal - Script Codes
Home Page Home
Developer Peter Hrynkow
Username peterhry
Uploaded September 14, 2022
Rating 3
Size 2,083 Kb
Views 28,336
Do you need developer help for Hardward Accelerate Mask Reveal?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Peter Hrynkow (peterhry) Script Codes
Name
Kris Kross Hamburger
Curved type with SVG
3D Axis Data Visualizer Thingy
Mobile Navigation for Big Phones
CSS Starbursts
CSS Button with Angled Sides
3D Message Flipper
Juicy Red Button
CircleType
Ripple Effect
Create amazing captions with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!