oneiamfor

Hi - sorry for the stupid question; Trying something really simple. http://codepen.io/oneiamfor/pen/zGQdvj This works in codepen environment, but not in my project/site. When viewing the console and looking at the inspector, I can actually see the <div id="heartIcon" class="fa fa-heart" style="transform: matrix(1, 0, 0, 1, 0, 0);"></div> transform matrix values change as it tweens, but nothing changes or appears on screen. Any beginner tips or ways i can troubleshoot further?

Hi Blake, The VAR was recently changed which was causing a problem with my js - however the main issue i had was in my CSS where i had a opacity:0 on a div ID that was still in front of the div container that was being displayed. IF i change the z-index's around to be more sequential to their display the inherited objects in that div (my animation) now are on top and the mouse events register. Super happy now. Thanks so much for your assistance though! All the best.

Thanks heaps for this - you went above and beyond. It works great now in my codepen, but I've got issues i've realised in my Skrollr page design that is stopping the mouse events from being registered on the individual div tags. Not really an easy thing to show on here. but the fire doesn't animate on mouse click: http://steveandashrunaway.info/ass3/index.html#bcg-02 I know this request is a little out of scope... so I will mark it as solved

Hi Diaco, thanks for the quick response. Do you know why when I take the mouse off the image div that it doesn't trigger the mouseleave event? The only way I can get the mouseleave event to trigger is when the mouse leaves the whole window? Is this because I am misusing the $(window).on('mouseleave', moveBoxBack); statement? Should I not be using the $(window) function and be using something else that only triggers when on the actual div object? (Sorry if isn't making sense)

So i've watched the GSAP intro videos; they're great. I mean they're so good they made me think I'd be able to use this library straight away. However I am new to coding and web design and while GSAP allows me to do things i'd never be able to imagine doing on the web I'm struggling to control the outcomes. In my codepen I'm trying to use the mouse hover events to initiate a simple tweenmax animation. I want the user to interact the pouring motion by just a mouseover but once the mouse leaves the bounds of the image it would go back to the starting position. I think my js coding is messy and not the best way to achieve this, and I think the revert or restart() functions might be what I should be doing, but i'm not sure on syntax or design. TL;DR. How can I use the timeline feature to revert the tween back to it's starting state upon the jquery mouseleave event?