Jump to content
Search Community

Hover image scale in drupal

Dayo test
Moderator Tag

Go to solution Solved by Dayo,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hello!

I'm trying to create a simple hover effect on images in a 2 column gallery. I use drupal 8 and iv'e included the html code for one of the images in the gallery 

 

The problem is that everything works in firefox but in chrome the animation flickers and the images goes invisible for a while before returning to normal (only on the right side of the gallery weirdly enough).

Iv'e had this problem with chrome before and seen some threads on it but i can't remember what code it was that fixed the flicker problem. Iv'e tried setting force3d:true but it did not help. 

I'm using Jquery in the .js file beacuse i got errors when i was using the original script which looked like this: 

<script language="JavaScript" type="text/javascript">
$('.tileImage').hover(
  function () {
    TweenMax.to(this, 2, {scaleX:1.1, scaleY:1.1, ease:Circ.easeOut});
  },
  function () {
    TweenMax.to(this, 2, {scaleX:1, scaleY:1, ease:Circ.easeOut});
  }
);
</script>

Any help is much appreciated, thanks for a great tool!

See the Pen ZLPJQL by anon (@anon) on CodePen

Link to comment
Share on other sites

  • Solution

Hello,

 

Yes I'm developing using localhost so the code was a bit of, sorry for that. Iv'e updated the codepen and now it shows an image with the effect. 
This codepen seem to work for me at least and like i said before, half of my gallery works fine but the other side flickers. I know iv'e run in to the problem of flickering animation in chrome before but i can't remember what code it was to fix it, i believe it was some javascript that should be placed on the first line in the main.js file.

 

 

UPDATE:

So iv'e tried a few solutions and this one seem to almost fix the problem:

In my css i add:

-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;

 

When this is added the zoom effect works on the image but half of the image get invisible when u first hover over them, then they return visible and works as expected, so basically the first hover gives me the problem for some reason. 

 

I also tried: 

TweenMax.set($('.tile'), {transformStyle: "preserve-3d", transformPerspective: 600}); 

And that seemed to fix the flickering problem but for some reason i have to hover on the bottom of some images for the zoom effect to trigger. I used the code from this thread https://greensock.com/forums/topic/10517-3d-transform-issue-in-chrome/

 

Another update:

So i fixed the problem, before i targeted the .tile class in the figure element and that did not work on all the images, i changed the class to one i'm using on the img element .img-responsive. The code that fixed the flicker problem was this:
 

TweenMax.set($('.img-responsive'), {transformStyle: "preserve-3d", transformPerspective: 600}); 

Thanks for the help

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...