Hi! I've just started with GSAP and I might be asking an impossible thing - it was trying to achieve it that led me to GSAP.
I have a super-complex SVG that I have as an <object> in an HTML doc. (I read that this was the best way to include SVGs, plus the code really is too large to put inline).
I have successfully used code from this topic http://greensock.com/forums/topic/12321-non-inline-svg-and-control-with-gsap/ to select a class in the SVG.
What I need is to implement something like this http://greensock.com/forums/topic/6435-simple-hoverzoom-on-multiple-divs/ on the class, as I want those elements to scale from centre on mouseover.
But I can't get it to work! Applying a transform on page load works, but not on mouseover. If anyone has any ideas - or a different way to achieve the requirement - I would be extremely grateful.
(My class isn't really called 'class'; that's just to keep things simple)
<div class="diagram_container">
<object id="diagram" type="image/svg+xml" data="images/software_diagram.svg"></object>
</div>
function foo(){
var svgObject = document.getElementById("diagram"),
svgDoc = svgObject.contentDocument,
svgChild = svgDoc.querySelectorAll(".class");
TweenMax.to(svgChild, 1, {rotation:360, transformOrigin:"50% 50%", repeat:2});//not actually used, but works on page load
}
//wait until object is loaded (lazy)
TweenLite.delayedCall(1, foo);
//Doesn't seem to work:
$('.class').hover(
function() {
TweenMax.to(this, .5, {css: {scale: 2},ease: Circ.easeOut});
}, function() {
TweenMax.to(this, .5, {css: {scale: 1},ease: Circ.easeOut});
});
//Also doesn't seem to work:
$(document).on("mouseenter", ".class", function(){
var $this = $(this);
TweenMax.to($this, .5, {scale:2});
}).on("mouseleave", ".class", function(){
var $this = $(this);
TweenMax.to($this, .5, {scale:1});
});