Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

Dayo

Members
  • Posts

    9
  • Joined

  • Last visited

Community Answers

  1. Dayo's post in Hover image scale in drupal was marked as the answer   
    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
×