Jump to content
Search Community

Clearprops with SVG elements

celli test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi, I am trying to use clearProps to re-set my SVG elements to their original positions before animating them with GSAP. But since they are SVG, and there is no real CSS that calculates their positioning, is this possible ? See the codePen, and the "end" timelines that should re-set the positions of the original SVGs... maybe there is another way.

See the Pen ZbOQwj?editors=001 by celli (@celli) on CodePen

Link to comment
Share on other sites

wow Diaco, that works! it's very interesting how that works--I did notice that SVG elements respond differently to x, and y positioning when moving them more than once (as if they are always relative to their original positioning). Should clearProps work here ? or is this a special case for SVG ?

Link to comment
Share on other sites

I actually think I can do it this way by cloning the original SVG--and then I can have control separately. But I need to add a newClass only to the new div's .txtSale and .txtFall classes, and then remove those original classes, so I can control the newly cloned elements with GSAP. 

 

I created a new codePen, and added the clone code to the top

See the Pen dYXzdE?editors=001 by celli (@celli) on CodePen

Link to comment
Share on other sites

Hi Celli,

 

 

You first asked if you could use clearProps on SVG BEFORE they were animated with SVG. ClearProps only clears inline styles on elements, and like you said your SVG doesn't have anything to clear. 

 

Not really sure that I understand what you need to do, but you should not need to clone elements that are animated by GSAP just to reset them.

 

Here is a reduced version of your first pen. Can you explain what it needs to do differently? Hoping we can get you a simpler solution.

  • Like 3
Link to comment
Share on other sites

I just basically wanted to run my "tlSaleStack" and "tlFallStack" again at the end of my master timeline, but with slightly different animation settings. I figured if "tlSaleStack" and "tlFallStack" already played once, I could use clearProps to reset the original properties, and then setup another timeline to animate them again.

 

I then figured if I couldn't reset my original SVG X, Y, Rotation, etc. positions--then maybe I could clone or duplicate them with different class names, and I could then control these newely created elements with GSAP at the end of my master timeline.... any insights into the best way would be very helpful.

Link to comment
Share on other sites

  • 5 months later...

Hi.

 

I have a similar problem that could be due to my code but thought it might help people out.

 

Here is a codepen showing my first attempt at a complex set of morphs:

See the Pen GoLaJo by helpchrisplz (@helpchrisplz) on CodePen

 

 

I seem to have a bug in my code that causes one of the SVG elements to not be put back to how it was at the start of the timeline when repeating the timeline repeats. e.g repeat: -1

 

so I had a look in the dom and noticed the svg elements d attribute was not being put back to its origin svg data.

I then created a function that would reset it back manually:

var bad_el = $("#green_btn");
function onRepeat() {
   //TweenMax.set( "#green_btn", { x:0,y:0,rotation:0,opacity:0,clearProps:"all" } )
  bad_el.attr("d", bad_el.attr("data-svg-origin")).removeAttr("data-svg-origin");
  
}
var sowerby_slide_show = new TimelineMax({
  //onUpdate: updateSlider,
  repeat: -1,
  onRepeat: onRepeat
});

if you comment out this line in the codepen: 

bad_el.attr("d", bad_el.attr("data-svg-origin")).removeAttr("data-svg-origin");

You will see what i mean when the animation repeats. There is a green svg element left behind. 

 

If any one can put me in the right direction so i can find out what it is about this one svg element (#green_btn in this case) that causes it to be the only one that doesn't go back to normal on timeline repeat. That would be helpful. :)

 

By the way I just relaunched our company website using lots of GSAP and want to show it off:
surgemarketingsolutions.co.uk

It uses the same animation as I am posting the code pen for in the top animated banner.

The animations are also responsive :) Its been hard to get it out of the doors but I love what i have been able to achieve now i have found GSAP!

 

Link to comment
Share on other sites

Glad to see all the progress on the site. Nice job with the arrows!

 

Thanks for the demo. Any chance you can strip it down to just the bare-minimum so we can only see the 1 or 2 SVG elements that are having a problem and the related js code?

There's like 600 lines of svg and few hundreds lines of JS. Its going to take a while for us just to find what we need to be looking at. 

 

Thanks!

  • Like 1
Link to comment
Share on other sites

I have updated the pen as my cleaning caused another unrelated bug.

See the Pen KzzOBg by helpchrisplz (@helpchrisplz) on CodePen

 

I noticed that my manual fix to set the d attribute does fix it when it repeats but adds an error in console: Error: Invalid value for <path> attribute d="210.69998168945312 39.5"

e.g when i do this: 

var bad_el = $("#green_btn");
function onRepeat() {
   //TweenMax.set( "#green_btn", { x:0,y:0,rotation:0,opacity:0,clearProps:"all" } )
  bad_el.attr("d", bad_el.attr("data-svg-origin")).removeAttr("data-svg-origin");
  
}
var sowerby_slide_show = new TimelineMax({
  //onUpdate: updateSlider,
  repeat: -1,
  onRepeat: onRepeat
});
Link to comment
Share on other sites

Another thing to note (that might be normal but i have spend a day testing to figure out) is it seems yPercent and xPercent (or could be the transformOrigin: "0% 50% -50" i used in the tween options) doesn't like when you display:none the nodes its is set on.

 

e.g: When loading the page with the svg animations on while using a mobile phone; i wanted the arrow animations to only show in landscape mode. This is because there is no room for it in portrait.

 

So i used a display none on the svg elements using a media query: @media(max-width: 500px) {}

When going back and forth between landscape and portrait the arrow tips when back to there positions before yPercent and xPercent (or could be transformOrigin) was set on them.

 

Changing the display none to visibility:hidden fixed this problem. Seems simple but i spent a lot of time reordering code to finally figure this out.

I hope this might help someone.

 

http://recordit.co/pDOT6wzbRi

See the Pen xVOWWZ by helpchrisplz (@helpchrisplz) on CodePen

Link to comment
Share on other sites

Surge you should avoid using display none on your SVG child elements. According to the SVG spec, when you have display none on a SVG element, it will remove the element from the render tree, and treats the element as if it does not exist.

 

So its is always best practice, as you have found out.. to either use the CSS visibility property, like visibility:hidden

 

Or you could use the SVG attribute for visibility

 

Resources:

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

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

 

:)

  • Like 3
Link to comment
Share on other sites

Surge, why are you doing this?:

bad_el.attr("d", bad_el.attr("data-svg-origin")).removeAttr("data-svg-origin");

We store 2 numbers in the data-svg-origin on SVG elements which have absolutely nothing to do with the "d" attribute of a <path> element. It's completely invalid to use the origin values in the "d" attribute. And then you were removing that important data that GSAP was relying on, thus it doesn't surprise me that your matrix() values were getting NaN in some cases. Again, I'm curious about what you were attempting with that line of code. 

  • Like 2
Link to comment
Share on other sites

Sorry I was thinking the data-svg-origin was the original d attribute before gsap started to morph the path.

 

The reason i was attempting to reset the d attr back was because i noticed one of the paths was not being reset back to what it should be when the timeline repeated:

 

on this code pen you can see that the green search bar button gets left behind when the timeline repeats:

See the Pen KzzOBg by helpchrisplz (@helpchrisplz) on CodePen

 

I don't fully understand why it gets left behind and the only thing i could thing of was resetting the d attribute.

But since then i have found that setting this path to be hidden at the end of the timeline works better:

function onRepeat() {                      
 TweenMax.set("#green_btn", { autoAlpha: 0.0 });
}

 

 

 

 

 And then you were removing that important data that GSAP was relying on, thus it doesn't surprise me that your matrix() values were getting NaN in some cases. Again, I'm curious about what you were attempting with that line of code. 

 

The  "getting NaN" was a separate issue that was happening on a totally different code pen.

I was not resetting the d attribute on this code pen. I guess i should have made another thread so the two couldn't get confused.

http://greensock.com/forums/topic/12472-clearprops-with-svg-elements/#entry58745

Link to comment
Share on other sites

Hello Surge..

 

You might want to look into throttling / debouncing your scroll event, so it only fires on the last scroll. This way it is not triggering your scroll up and down functions multiple times. I am seeing it fire like 24 times just for one wheel tick of the mouse wheel. That means your scroll function would fire 24 times for just one scroll tick. And you can see how that can cause some issues trying to apply all that code in the scroll functions which can cause performance issues.

 

Here is a link to way to use throttle and debounce for your scroll events so they only fire on the last scroll event that is fired. Because i see your scroll events firing multiple times instead of on the last scroll event tick.

 

https://css-tricks.com/the-difference-between-throttling-and-debouncing/

http://www.html5rocks.com/en/tutorials/speed/animations/

http://blogorama.nerdworks.in/javascriptfunctionthrottlingan/

https://davidwalsh.name/javascript-debounce-function

http://benalman.com/projects/jquery-throttle-debounce-plugin/

https://www.viget.com/articles/better-scroll-and-resize-event-handling

 

:)

  • Like 2
Link to comment
Share on other sites

  • 1 month later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...