robin-dela / hover-effect Goto Github PK
View Code? Open in Web Editor NEWJavascript library to draw and animate images on hover
License: MIT License
Javascript library to draw and animate images on hover
License: MIT License
How would I use hover-effect in a React component? I've tried the following but I can't seem to get it to work. Had someone on Stack Overflow recommend using refs in place of document.querySelector.
import React, { Component } from 'react';
import hoverEffect from 'hover-effect';
import kakko from '../assets/kaapo.jpg';
import {kakkoRangers} from '../assets/kakko-rangers.jpg';
import {ladyLiberty} from '../assets/ladyliberty3.png';
import styled, { css } from 'styled-components';
const STYLES = styled.div`
height: 100vh;
width: 100%;
.my-div {
height: 20em;
width: 30em;
}
`;
class Test extends Component {
constructor(props) {
super(props);
this.state = {
}
this.myRef = React.createRef();
}
render() {
const animation = new hoverEffect({
parent: this.myRef.current,
intensity: 0.3,
image1: '..assets/kaapo.jpg',
image2: '..assets/kakko-rangers.jpg',
displacementImage: '../assets/ladyliberty3.png'
});
return (
<STYLES>
<div>
<h1>Test</h1>
<div ref={this.myRef} className="my-div">
</div>
</div>
</STYLES>
);
}
}
export default Test;
Hi.
Congratulations for the tool!! Is so amazing.
I'm with problem. Relative path to local images is not working.
Exemple:
new hoverEffect({
parent: document.querySelector('.ticket'),
intensity1: 0.1,
intensity2: 0.1,
// angle2: Math.PI / 2,
image1: "../images/balloon.jpg",
I imported the lib imagesloaded, but not working. Only function with images uploaded from websites.
Sorry if it's a stupid question, but is it possible to create an automatic loop that is not dependant on hover?
Hey, I was playing around with this amazing demo and trying to make it work with videos.
I changed the querySelectorAll from img to video and every other things related to img tags, on js and css files, but whatever I do the console says
Uncaught TypeError: Cannot read property 'getAttribute' of undefined
If I log the imgs[0].getAttribute('src'), it returns the video url instead :(
Any ideas?
I've got the following setup:
I'm using a mask with a video in the background.
Based on the scroll position the video will be replaced.
The transition should be with the distortion effect.
This works fine, but I get the error from this issue: #23
Also relates to: #14
I thought I could replace the images and run the .next()
event, but doesn't work.
if (!distortion) {
distortion = new hoverEffect({
hover: false,
parent: videoContainer.get(0),
image1: lastVideo.thumbnail,
image2: nextVideo.thumbnail,
intensity: 0.3,
displacementImage: '/images/distortion.jpg',
});
} else {
distortion.image1 = lastVideo.thumbnail;
distortion.image2 = nextVideo.thumbnail;
}
distortion.next();
Any ideas on how to resolve this?
Is there a way to use this as a hover effect for a portfolio collection? Where I can input the same CMS image as image1 and image2. I tried putting the .div_name for the image1 and 2 inputs instead of an image link.
Has anyone achieved this before?
I'm using this effect on multiple images and it seems to only handle up to 16 images at the time.
The root of the cause seems to be this warning.
Too many active WebGL contexts. Oldest context will be lost
This answer in stackoverflow suggests that only one WebGLRenderer
should be used.
I updated the source code to declare the renderer outside of the constructor but the effect only gets applied to one image.
Does anyone else gets this error?
i use this hover-effect with two video but video's quality is not good and "imagesRation" parameters
does not work..
Hi,
I have a grid images and noticed while testing hover sometimes not working. It is not working on mouse enter the image but works after mouse out of the image.
Any comment on this?
Kind regards
hi i want to use this effect in wordpress and i dont know how to do it do you know how to do it
Hi. I'm trying to use the effect with elements in the data attributes.
The problem is that while the images are changing the effect isn't shown.
temp site: https://kolorlab.pl/brk/pl/o-nas
I'm using this with tiny slider as follows.
docum document.querySelectorAll('.goto-next-button').forEach( button => {
button.onclick = function () {
let info = slider.getInfo(),
indexPrev = info.indexCached,
items = info.slideItems,
count = info.slideCount,
indexCurrent = info.index; // int
console.log(indexCurrent)
let current = items[indexCurrent].dataset.backgroundImage;
let next = items[indexCurrent+1].dataset.backgroundImage;
console.log(current,next);
displaceAnimation(current,next);
slider.goTo('next');
return false;
}
});
document.querySelectorAll('.goto-prev-button').forEach( button => {
button.onclick = function () {
let info = slider.getInfo(),
indexPrev = info.indexCached,
items = info.slideItems,
count = info.slideCount,
indexCurrent = info.index; // int
console.log(indexCurrent)
let current = items[indexCurrent].dataset.backgroundImage;
let next = items[indexCurrent-1].dataset.backgroundImage;
displaceAnimation(current,next);
slider.goTo('prev');
return false;
}
});
I've also tried to preload the images but with no luck.
I'm using a cms so the user can add as many slides in the future as he wants, I also used the hover version from https://github.com/robin-dela/hover-effect
Edit:
The issue was not calling the transition functions.
Ive followed the tutorial from cod drops etc, but the canvas renders twice and with a height thats far less that it should be.
Hey all,
İ wanna update hoverEffect - "image2" link dynamically.
but I cant do it. It’s possible? ( actually
I want to create objects with array imgs. They will change in order.)
Alternative option is destroy DOM and create new one. But its not looking good.
by the way: i guess i cant using object-fit property on canvas (img)
Hi, I tried using the library after installing the package and it's dependencies via NPM but it doesn't display the images at all. I assume it's because I'm using a newer version of GSAP in contrast to the version used to initiate the library. How do I fix this?
I don't have much experience with custom shaders but I'm interested in creating a fork or PR of this library that allows for multiple images using a single distortion map.
Can anyone point me in the right direction to adjust the custom shader portion of the code?
I have the effect working on touch for an initial touchstart/touchend only on mobile. Following the first completed animation I then have to hold the touch down to enable the effect. This causes issues as a long touch opens the mobile menus.
Can you advise on a workaround?
Hey, ive looked many hours into my code and tried a lot, but unfortunatly the canvas will not load the image. Its injected but it does not show any color or image.
https://preace.de/ PW: heik0
I would appreciate any suggestions.
Hi @robin-dela
It says "parent is missing" and "Gsap target not found"
I've changed the GSAP path removing /TweenMax from the .js files
I'm quite new in JS so your help will be very nice and welcome.
Thanks
(Merci d'avoir partager ça c'est cool ! )
I can't get the angle set so the effect falls downwards.
Hey,
I am trying to use reuse this fantastic hover-effect solution so that rather than on hover, I get the same effect on page load. A similar example (without the slider) would be: https://yard.agency/en.
My initial thought would be to force hover on the element, using jQuery methods like below:
// 01. Document ready
$(document).ready(function(){
$("figure.my-element").trigger('mouseenter');
});
// 02. Window load
$(window).load(function(){
$("figure.my-element").trigger('mouseenter');
});
// 03. Timeout
setTimeout(function(){
$("figure.my-element").trigger('mouseenter');
}, 2000);
Unfortunately, none of the above appear to work, and I wonder if you can shed a simple solution that will help me achieve this load-in effect.
Thank you and great job!
Why so many errors! I remember this working first time and now I can't even get past all the errors and get a basic tutorial working (which I copied and pasted to make sure I wasn't the one making mistakes)
What is this error now?!
Access to image [image file path] from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, isolated-app, chrome-extension, chrome-untrusted, https, edge.
I did everthing correct and still images don't showing up. In my js file I have few errors and also in the hoffer-effect.umd.js are many errors. Someone know how to fix it?
hi , sorry for the newbie question i'm trying to learn using this shader library with reactjs
is there an example with react?
Is it possible to generate the hover effect whenever a button is clicked? I am trying to build an image slider that uses this effect to transition between images
Hi,
I am using hover effect in wordpress posts and load more functionality. Everything works fine up to a point where more than 12 objects (with hover effect) are loaded. At that point the old objects get deleted and the console informs me with the following...
WARNING: Too many active WebGL contexts. Oldest context will be lost.
How can I create multiple instances of three.js so that I can avoid this conflict with hover.js?
Any ideas?
Thanks!
I'm setting up on JS file as the following, however I'm getting an issue - Uncaught TypeError: Cannot read property 'greensock' of undefined
Here's my JS code:
import { hoverEffect } from 'hover-effect';
new hoverEffect({
parent: document.querySelector('.img'),
intensity: 0.3,
image1: './1.jpg',
image2: './2.jpg',
displacementImage: './4.png'
})
When I initialise with a png image, it renders with a black background, instead of being transparent. What may the issue be?
Thanks.
Is there a possibility to add "muted" to the videos when i want to use them instead of images. It works on my localhost just fine, but because of the new policy if i upload it wont show the videos.
and i have these errors in console:
256WebGL: INVALID_VALUE: tex(Sub)Image2D: video visible size is empty
2hover-effect.umd.js:1 Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first. https://goo.gl/xX8pDD
Maybe there is a way to overcome this?
Would appreciate any suggestions :)
Hello,
I would really love to use this feature on my portfolio site but when I download the files and view the examples on Chrome and Safari the images do not show. They show in Firefox though... The CodePen example you posted doesn't work on Chrome either.
Whenever I try using videos instead of images (I use two videos for images 1 and 2, and use an image for the displacement), I get spammed with this message "THREE.WebGLState:" // [object DOMException] {}
an infinite amount of time, for as long as the window is open.
As soon as I change videos back to image files, and remove the line "video: true", it works fine again.
Hi,
I'm trying to implement this helper in WP on a site using elementor. I copy pasted the example code to test and only changed the imgs, displacement img paths. Yet the canvas that's generated always has 0 height.
If i add a canvas element inside the div, it works. However, i end up with 2 canvas elements creating a white space above the auto-generated canvas which contains the images and hovering on that space changes images as well...
Any guidance is much appreciated.
Thanks
I found that working with multiple videos make the page very slow
How about using a GIF or webp image with animation but currently when using gif it shows static image, please advice
Hi @robin-dela ! I've been trying to implement this version of your effect on a Squarespace site that I'm working on. I'm not a developer so this is all very new to me.
Scripts loaded:
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/gsap.min.js" integrity="sha256-3arngJBQR3FTyeRtL3muAGFaGcL8iHsubYOqq48mBLw=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.min.js" integrity="sha256-gSh8eotzb/CVvCREGPUNgIWuDnTYnZvVOQnRrP1eDjI=" crossorigin="anonymous"></script>
<script src="https://joannelam.com/hover.js"></script>
<script src="https://joannelam.com/script2.js"></script>
Contents of script2.js:
var myAnimation = new hoverEffect({
parent: document.querySelector('.section-background'),
image1: 'https://i.ibb.co/rb1VzvS/bg.png',
image2: 'https://i.ibb.co/rb1VzvS/bg.png',
displacementImage: 'https://i.ibb.co/WGKQSkh/displacement.png',
imagesRatio: 667 / 1000, });
The hover effect currently doesn’t work within the section-background div. But if I simply replace .section-background with .page-section (parent section in which the div exists), for example, the hover effect does work, however the images show up off to the side of the site and not where I need them. Any ideas as to what the issue might be?
If it helps at all, the site I’m working on is lizzykain.com (password is “test”). Many thanks in advance!
@robin-dela issue with image aspect ratio when you put vertical dimension image it will stretch in jquery generated canvas i dont find any fix for it over the internet
Hi!
I followed this tutorial to build the distortion on hover: [https://www.youtube.com/watch?v=hTjhqxulhP8&t=387s]. But I always got this error message: ReferenceError: hoverEffect is not defined. I've installed Three.js and Gsap using npm because I used them to create other effects, so I didn't write the cdn links for them in my html file.
Could you give me some information to resolve this issue. I tried a few ways, but still got this problem.
Thank you so much for your help.
Hello. Is it possible to respect aspect ratio of image, inside of three scene.
Or to make image behavior similar to object-fit: cover?
For the purpose of percent width container
sorry if that is a silly question, I am brand new at this but am excited to learn. Thanks for the original code Robin! I have some pretty cool ideas inspired by this, would love to pick your brain on how to make it happen sometime. here's one thought to spark your interest. Have you ever seen the old scooby doo cartoons?remember how he would always stack up the sandwiches and then shuffle them like cards? I have a few thoughts there I think the obvious would one images kinda splits and fragments off and transforms to another by reversing the effect out, but the cooler one is you could have a folder or gallery cover split into all of it's contents and kind of hover separately until you scroll off of original image and they just settle in their home. anyway I am trying to do this hover trick on my site to no avail? Help?
Hi there, thanks for building this amazing library for us to use. I would like to request for the dispose() / clean() method inside the HoverEffect for cleaning up the three.js renderer before unmount in SPA, because the hoverEffect won't get destroyed in single page application, which creates the renderer only and leaves out a number of the webGL content, thus the warning in the console.
Something like...
var hoverEffect = new HoverEffect({...});
hoverEffect.dispose(); // <- we can then call this in beforeDestroy / before unmount phase
would be really helpful. Thanks a lot.
Hey,
After using .next();
(as per #4) to animate the effect document load, I'm now hoping to prevent any more transitions when hovering over this particular element.
Effectively I'm hoping to achieve:
.next()
) takes place once.Is there some way of easily destroying/preventing hover-effect, i.e. after an interval?
I need the image (2nd) to still be visible, just no hovering effects.
Thank you and kindest regards,
Elliott
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.