robin-dela / hover-effect Goto Github PK

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:

• A user enters website and the animation (using .next()) takes place once.
• When the user hovers on/off the element after the above, I don't want the animation to take place.

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

@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 , sorry for the newbie question i'm trying to learn using this shader library with reactjs

is there an example with react?

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

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;

I have two images that has different orientations and ratios , The first one is portrait and the other is landscape:

my .container has a height of 372 px and a width of 561 px
I tried using imagesRatio but the other won't follow the same "Ration" given.

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.

When I initialise with a png image, it renders with a black background, instead of being transparent. What may the issue be?

Thanks.

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!

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

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?

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.

hi i want to use this effect in wordpress and i dont know how to do it do you know how to do it

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

Images even if i make the exact same size, as the canvas it ends up zooming the image and in some images makes it squished how to get the image to behave like the css property
background-size: cover

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?

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.

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!

I can't get the angle set so the effect falls downwards.

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?

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.

Ive followed the tutorial from cod drops etc, but the canvas renders twice and with a height thats far less that it should be.

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?

i use this hover-effect with two video but video's quality is not good and "imagesRation" parameters
does not work..

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

In the parent div for the image displacement, I had no image tag and the canvas wasn't displaying but if I add an image tag in the parent, the canvas loads with the image distortioned working properly and the image is left there.

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?

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.

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?

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'

})

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 ! )

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.

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?

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

Sorry if it's a stupid question, but is it possible to create an automatic loop that is not dependant on hover?

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 :)

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?

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.

check this out https://stackoverflow.com/questions/66244968/cannot-use-import-statement-outside-a-module-error-when-importing-react-hook-m

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?

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)

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.