Jump to content


  • Posts

  • Joined

  • Last visited

Posts posted by Pola86

  1. 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:




    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



    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

    • Like 2
  2. 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() {
        TweenLite.to('.wrapper', 1, {
            scrollTo: {
                x: $('#slide-glasses-2').position().left
            ease: Power2.easeOut
    // the trigger
    $("*[href^='#']").click(function() {

    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');

    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

  3. 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