Jump to content
Search Community

DrawSVGplugin

busybuilding test
Moderator Tag

Go to solution Solved by PointC,

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 there, im trying to load an animation drawing only ONCE when im on the elements that i have it include,

the problem is that the animation playing again and again when i scroll down or up after its finished

 

this is my js :

 

jQuery(window).scroll(function(event) {

if(jQuery(".ergoback").offset().top < jQuery(window).scrollTop() + jQuery(window).outerHeight()) {

var fl = new TimelineLite();
var paths = "#path1,#path2,#path3,#path4,#path5,#path6,#path7,#path8,#path9,#path10,#path11,#path12,#path13,#path14,#path15,#path16,#path17,#path18,#path19,#path20,#path21,#path22,#path23,#path24,#path25,#path26,#path27,#path28,#path29,#path30,#path31,#path32,#path33,#path34,#path35,#path36,#path37";
fl.fromTo(paths, 3, {drawSVG:0}, {drawSVG:"102%"}, "-=1");

}

});

 

when the drawing complete and if i move the page up or down its starting again, im trying to use fl.pause(); after the animation but its on pause mode from the beggining

 

 

any help with this?

 

 

best regards

George Douvogiannis

Link to comment
Share on other sites

Hi George :)

 

Welcome to the GreenSock forum.

 

Looks like you're creating the timeline each time you hit the trigger. I'd recommend creating that timeline outside of your scroll trigger function.You can create it in paused mode and then play() it when you reach the trigger. To make things a bit tidier, I'd add a class to all those paths and just target the class instead of those 37 paths in your tween. I see you also have a position parameter set for the drawSVG tween. Is that tween part of a larger timeline?

 

It's tough to troubleshoot without a CodePen demo. If you could make one for us, we can make sure you're getting the best answers. Here's some info about that:

 

https://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/

 

Happy tweening.

:)

  • Like 3
Link to comment
Share on other sites

Hi there, first im not expert on jquery but im trying hard to make this happend :)

 

this is a codepen that im trying to make but it still not working well...dont know why but if you could help me with it it will be awesome.

 

See the Pen XMzYmg by geodou (@geodou) on CodePen

 

About those ids, i try to find how make this works without using all of these ids sets in js but i didnt find any answer, i have multiple svg's in some pages so i must use ids or classes to make this happend with out conflicts each other. i have some rows in my design so i need everytime to view a section in broswer triger the svg to make the draw.

 

if you could help me with this it will be awesome

 

best regards

George Douvogiannis

Link to comment
Share on other sites

Hi George,

 

if you want to draw the paths step by step here a forked version of your pen: 

See the Pen WpXgYV?editors=1010 by mikeK (@mikeK) on CodePen

 

All paths have the class "path" and are animated by "staggerFrom".

You could arrange the sequence by putting the path in the svg in your preferred order.

 

I hope this is helpful.

 

Kind regards

Manfred

  • Like 2
Link to comment
Share on other sites

Hi mikel,

thanks a million for your help to this :) i was looking a whole day how to work with this and not include to a var 45 ids...this is awesome!

 

is it possible to help me with one more thing? i have multiple svgs into a page in a rows and i want when im "seeing" in my browser a specific row then that svg start running...now all of these play on document ready action.

 

thanks again for your help!

 

Best regards

george douvogiannis

Link to comment
Share on other sites

  • Solution

Thanks for jumping in Manfred. :)

 

George: I think your question about 'seeing' an SVG in a row and then starting the animation is about triggering on scroll which is what your code was showing in the original post.

 

You can certainly write your own trigger, but if you're just getting started with jQuery, I'd recommend using ScrollMagic. That's exactly what that plugin is designed to do. It triggers your animations when you hit certain scroll triggers. It's really easy to use:

 

http://scrollmagic.io/

 

Another of our forum mods here, Petr Tichy, has lots of tutorial for ScrollMagic on his site. He can have you up and running with it pretty quickly.

 

https://ihatetomatoes.net/visual-guide-scrollmagic/

https://ihatetomatoes.net/scrollmagic-tutorials-for-complete-beginners/

https://ihatetomatoes.net/5-days-with-scrollmagic/

 

A tip about not including all the path IDs as your tween target: you can add a class to each path as Manfred showed in his demo and I suggested in my first answer, but GSAP makes it even easier. Say you have dozens or even hundreds of paths. That would take some time to add a class to all of them. A fast way to target all those paths with no class or ID is to group them and then target the child paths of the group.

// so your SVG has the paths grouped, but they have no class or ID
<g id = "someGroupName">
   <path d="....."/>
   <path d="....."/>
   <path d="....."/>
   <path d="....."/>
</g>

// you then target like this
tl.staggerFromTo("#someGroupName path", 0.5, {drawSVG:"0"}, {drawSVG:"100%"}, 0.2)

Hopefully that makes sense and helps.

 
Happy tweening.
:)
  • Like 2
Link to comment
Share on other sites

Hi PointC and thanks for answering,

that was my originally post, and thats why i didnt set this as solved... im glad you answer my question and it helps me alot, as i mention before because im not javascript expert but im trying to find answers through web :)

 

thanks for your answer

 

you guys you rocks :)

 

thanks for everything

 

Best Regards

George Douvogiannis

  • Like 2
Link to comment
Share on other sites

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