Jump to content
Search Community

Smudger

Members

  • Posts

    7

  • Joined

  • Last visited

 Content Type 

Posts posted by Smudger

    Non-inline SVG, mouseover transform

    in GSAP

    Posted

    Hi Jonathan

     

    Yes, it's in IE11 and the elements are SVG. Here's a codepen with the essentials, though the scaling doesn't work at all there... my coding is so crappy.

     

    See the Pen VKkEAr by Smudger (@Smudger) on CodePen

     

    The principle of what I want to achieve is: inline SVG with multiple rects, each rect scales x2 on mouseenter, scales back to 1x on mouseleave.

     

    Thanks for any help!

    Non-inline SVG, mouseover transform

    in GSAP

    Posted

    New problem..!

     

    I used one of the examples you provided to animate a scale transform on mouseenter/mouseleave, which worked.

     

    I needed to add code to bring the item being hovered to the 'front' each time, so I added "el.parentNode.appendChild(el);" within the mouseenter function. This works, but not in IE... the reverse animation doesn't seem to fire on mouseleave so the items stay in the scaled-up mouseenter state.

     

    I'm sure it's my crappy knowledge of jquery to blame. If someone could advise how to fix I'd be most grateful.

    // set some global properties
TweenMax.set(".zoom", {transformOrigin:"50% 50%"});

// loop through each element
$(".zoom").each(function(i, el) {

// create a timeline for this element in paused state
var tl = new TimelineMax({paused: true});

// create your tween of the timeline in a variable
tl
.set(el,{willChange:"transform"})
.to(el, 0.4, {scale:2, ease:Power1.easeInOut});

// store the tween timeline in the javascript DOM node
el.animation = tl;

//create the event handler
$(el).on("mouseenter",function(){
//this.style.willChange = 'transform';
this.animation.play();
el.parentNode.appendChild(el);
}).on("mouseleave",function(){
//this.style.willChange = 'auto';
this.animation.reverse();
el.parentNode.insertBefore(el,el.parentNode.firstChild);
});
});

    Non-inline SVG, mouseover transform

    in GSAP

    Posted

    Thanks again for the help!

     

    It's likely that I won't need to achieve transforms on non-inline SVG after all, having read that including SVG as <object> is bad for accessibility. The mouseover code will still come in very handy of course.

    • Like 1

    Non-inline SVG, mouseover transform

    in GSAP

    Posted

    Hi Jonathan, and thanks for the quick reply.

     

    I understand the principle of using codepen to identify errors but I'm not sure I can use it in this case as my SVG is not inline?

     

    There isn't really much more code to show anyway - the page is basically a div with the SVG <object> inside. The only jquery used is that shown in my post above. That, plus <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>, is placed at the end of the <body>.

    Non-inline SVG, mouseover transform

    in GSAP

    Posted

    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});
});
×
×
  • Create New...