Jump to content
Search Community

Smudger

Members

  • Posts

    7

  • Joined

  • Last visited

Smudger's Achievements

1

Reputation

  1. Smudger
    Thanks so much for the research and help - really appreciated! It's good to know why something isn't working. So I should forget about the bring to front feature?
  2. Smudger
    Thanks again for the help. Afraid though that the new code doesn't do the trick in IE11... the boxes stay scaled up. The same happens in your codepen, though the 'bring to front' works.
  3. Smudger
    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. https://codepen.io/Smudger/pen/VKkEAr 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!
  4. Smudger
    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); }); });
  5. Smudger
    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.
  6. Smudger
    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>.
  7. Smudger
    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...