Hi guys! Im struggling to get my site to work correctly with projects hover css -
Here is the example im trying to replicate:
(Live Site) – https://motion-hover-effect.webflow.io/
(Read Only) – Webflow - Motion Hover Effect
Here is my site im trying to get the above example to work:
(Read Only) http:// https://preview.webflow.com/preview/fabric-4acd03?utm_medium=preview_link&utm_source=designer&utm_content=fabric-4acd03&preview=c66568ddb756508822dcc58ecef57662&workflow=preview
(WIP) https://fabric-4acd03.webflow.io/
Any help or suggestions would be greatly appreciated!
mww
(Milan )
May 17, 2022, 10:35pm
2
Hi @Cameron_Will ,
You’ll just need to change the (.grid) to (.grid-2) to match your div class name, you can replace your Before </body>
tag code with this and it should work on republish:
<script src="https://uploads-ssl.webflow.com/5dae0e06b8d3a0d097fa5f9e/5dae11dbb8d3a0d3f7fa83cc_three.min.txt"></script>
<script src="https://uploads-ssl.webflow.com/5dae0e06b8d3a0d097fa5f9e/5dae11dab8d3a0a088fa83c8_TweenLite.min.txt"></script>
<script src="https://uploads-ssl.webflow.com/5dae0e06b8d3a0d097fa5f9e/5dae11daf8881a5af4531765_Math.txt"></script>
<script src="https://uploads-ssl.webflow.com/5dae0e06b8d3a0d097fa5f9e/5dae11dac28723d0da3279a6_EffectShell.txt"></script>
<script src="https://uploads-ssl.webflow.com/5dae0e06b8d3a0d097fa5f9e/5dae11dadd5f83040460b5ed_RGBShiftEffect.txt"></script>
<script src="https://uploads-ssl.webflow.com/5dae0e06b8d3a0d097fa5f9e/5dae11f6c287237662327a19_imagesloaded.pkgd.txt"></script>
<script>
const container = document.body
const itemsWrapper = document.querySelector('.grid-2')
// Preload images
const preloadImages = () => {
return new Promise((resolve, reject) => {
imagesLoaded(document.querySelectorAll('img'), resolve);
});
};
// And then..
preloadImages().then(() => {
// Remove the loader
document.body.classList.remove('loading');
const effect = new RGBShiftEffect(container, itemsWrapper, { strength: 0.25 })
});
</script>
2 Likes