[Dragging masked SVG path]

Hello Pola86

 

That has to do with the way the SVG spec is. So any element with display none will be removed from the render tree.

 

You can find more about that here:

 

https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/display

 

When applied to a container element, setting display to none causes the container and all of its children to be invisible; thus, it acts on groups of elements as a group. This means that any child of an element with display="none" will never be rendered even if the child has a value for display other than none.

• When the display attribute is set to none, then the given element does not become part of the rendering tree.

So you either have to use the visibility attribute on your SVG element or use visibility:hidden in your css

 

Resources:

SVG visibility attribute: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/visibility

CSS visibility property: https://developer.mozilla.org/en-US/docs/Web/CSS/visibility

 

Thanks Jonathan, very helpful, now it's working like a charme, thanks everybody

[Dragging masked SVG path]

So i figured out the problem, Firefox can't render svg in display:none.. someone has a solution for this?

[Dragging masked SVG path]

In the console when i digit window.TweenMax it returns undefined, has this something to do with which order I call the scripts?

[Dragging masked SVG path]

Hey guys, does Snap.svg has some issues with Firefox? I can't make it work while on Chrome and IE I have no problems

 

http://s.codepen.io/Polenji86/debug/vyVxwO

[Passing an argument with ScrollTo not working]

Seems to be working...

See the Pen oYaWOB?editors=0010 by osublake (@osublake) on CodePen

 

And you can do bezier easing using CustomEase.

 

Thx OSuBlake, it was just a stupid "return false;" missing

Now it runs smoothly

[Passing an argument with ScrollTo not working]

Sorry it was a dumb question, I managed to resolve it by just adding "return false;" inside the trigger function

$("*[href^='#']").click(function() {
    var target = $(this).attr('href');
    goTo(target);

    return false;
});

[Passing an argument with ScrollTo not working]

Hello everyone,

 

I'm having a problem with my scrollTo function.

I'm building an horizontal slider scrollable with buttons but there's something weird happening.

 

Here's an example of what i'm trying to accomplish with working code:

// the function

function goTo() {
    e.preventDefault;

    TweenLite.to('.wrapper', 1, {
        scrollTo: {
            x: $('#slide-glasses-2').position().left
        },
        ease: Power2.easeOut
    });
}

// the trigger

$("*[href^='#']").click(function() {
    goTo();
});

Point is I don't want to call the function for every button so I wrote this:

// the function

function goTo(target) {
    TweenLite.to('.wrapper', 1, {
        scrollTo: {
            x: $(target).position().left
        },
        ease: Power2.easeOut
    });
}

// the trigger

$("*[href^='#']").click(function() {
    var target = $(this).attr('href');

    goTo(target);
});

This doesn't work, I mean the click event brings me to the exact slide but without the scrolling animation.

Any suggestions?

 

Thx everyone

 

 

 

See the Pen NbLeZa by Polenji86 (@Polenji86) on CodePen

[Dragging masked SVG path]

Yep thx everyone, keep up with the good work i'm your fan 

Btw if someone's interested and needs something similar this is the final result 

See the Pen mOjKgj by Polenji86 (@Polenji86) on CodePen

.

[Dragging masked SVG path]

Ok it works like a charme, thanks a lot, it's like 2 days i'm looking into this.. you are my new god i'm gonna worship you

[Dragging masked SVG path]

OSUblake thanks, i'm digging into your code, stay tuned

[Dragging masked SVG path]

Hello everyone,

 

I'm looking for a hint, as you can see in the Codepen attached I managed to drag a masked SVG circle around the container, problem is when I want to use a path as a mask I don't know how to get the coordinates (for path there's no "cx" and "cy").

Any suggestions on how I could accomplish this?

This is the function that does the trick with a circle

//move the mask with the drag
function onThrowUpdate() {

  var posX = parseInt(rocketHole.getAttribute('cx')) + this.target._gsTransform.x;
  var posY = parseInt(rocketHole.getAttribute('cy')) + this.target._gsTransform.y;

  TweenMax.set(rocketMask, {
    attr: {

      cx: posX,
      cy: posY

    }

  })

See the Pen KNeZOE by Polenji86 (@Polenji86) on CodePen