Jump to content
Search Community

Animating 2nd group of lines in SVG

BeckBeach 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

I am trying to animate a 2nd group of lines that will be dashed. They will animate one at a time continuously after the first animated timeline is completed. I'd like them to animate randomly if possible. The scene1 timeline seems to not play and I get errors. 

Uncaught Cannot add undefined into the timeline; it is not a tween, timeline, function, or string.

 

 

Here is my code:

 



var mainTl = new TimelineMax({delay:0.5});

function getLines() {
var tl_lines = new TimelineMax();

tl_lines
.staggerFrom(".st0", 2, {stroke:"white",strokeWidth:2,drawSVG:"0%"},0)
.from(".cls-3", 1, {scale:0,transformOrigin: 'center center',ease:Bounce.easeOut},0)
.to(".st0", 1, {autoAlpha:0});
}

function getDash() {
var tl_dash = new TimelineMax();

tl_dash
.to("#line26", 1, {autoAlpha:1})
.staggerFrom("#line26", 2, {stroke:"white",strokeWidth:2,drawSVG:"0%"},0);
}

function init() {
mainTl
.add(getLines(), 'scene-intro')
.add(getDash(), 'scene1');

}

init();

See the Pen dvKYYJ by beckbeach (@beckbeach) on CodePen

Link to comment
Share on other sites

Hi BeckBeach :)

 

Looks like you're trying to use DrawSVG to draw a dashed line. That won't work correctly as DrawSVG makes one big dash and animates the offset. Your best bet there is to use a mask. I did a little write-up and demo about that in our SVG Gotchas thread.

 

https://greensock.com/forums/topic/13681-svg-gotchas/?p=57942

 

Hopefully that helps.

 

Happy tweening.

:) 

  • Like 2
Link to comment
Share on other sites

You can randomize all the lines in an array, but a stagger is probably not the best choice. You'd need to loop through the elements and create a tween for each one. You then add those tweens to a timeline. That gives you tons of control to randomize duration, positions, delays etc. Pretty much anything you want. 

 

Coincidentally, I just answered a question in another thread yesterday about this topic and made a demo to show how it's done. 

 

See the Pen peVmPG by PointC (@PointC) on CodePen

 

Hopefully that helps.

 

Happy tweening.

:)

  • Like 3
Link to comment
Share on other sites

Hi BeckBeach  :)

 

Looks like you're trying to use DrawSVG to draw a dashed line. That won't work correctly as DrawSVG makes one big dash and animates the offset. Your best bet there is to use a mask. I did a little write-up and demo about that in our SVG Gotchas thread.

 

https://greensock.com/forums/topic/13681-svg-gotchas/?p=57942

 

Hopefully that helps.

 

Happy tweening.

:)

Hi I am trying to do this but it keeps showing a dotted line that won't animate. I am just trying it on one line at the bottom. Can you let me know what I am doing wrong?

What I am going to do with this animation is have the lines draw and then fade in 50%. Then, randomly, a dotted line will draw one at a time very fast. This animation will be ongoing until the user leaves the page. It is for my job at Verizon. We recently bought the business club greensock and I am the only developer on the team.

Link to comment
Share on other sites

You were really close. Here's a fork of your pen  - all working fine.

 

See the Pen KWxBXE by PointC (@PointC) on CodePen

 

The problem was in your functions that create the timelines. You need to return the timeline in the function before adding it to the master like this:

function getDash() {
    var tl_dash = new TimelineMax();
    tl_dash.fromTo("#lines_testMask", 5, {drawSVG:"0% 0%"}, {drawSVG:"0% 100% " });
    return tl_dash;
}

Does that make sense?

 

Happy tweening.

:)

  • Like 2
Link to comment
Share on other sites

Yes it does. I think it looks really good but now my boss says he just wants one dot to draw across. I will try to do this using your airplane line example. It will just be a single dot moving across each site with no line showing up. I appreciate your help!

Link to comment
Share on other sites

If you're changing to a single dot moving along the line, I don't think you'd need to use DrawSVG and a mask. I'd recommend using the pathDataToBezier() method of the MorphSVG plugin. That makes it super easy to have an element follow a path. Here's some more info:

 

https://greensock.com/morphsvg-update

 

Happy tweening.

:)

Hi thanks! I got the "#blip" shape to move along the path, however, I need to have it move along the center of the line.

See the Pen gmBwpd by beckbeach (@beckbeach) on CodePen

Link to comment
Share on other sites

You should be able to center it on the line like this:

TweenMax.set("#blip", {transformOrigin:"center center", xPercent:-50, yPercent:-50})

You should also change your pen to the latest version of GSAP (1.19.1). Right now you're using a two year old version (1.16). Please make sure you're using the latest plugins too. Here's a pen with all the Club plugins that you can use on CodePen.

 

http://codepen.io/GreenSock/details/OPqpRJ/

 

Happy tweening.

:)

Link to comment
Share on other sites

You should be able to center it on the line like this:

TweenMax.set("#blip", {transformOrigin:"center center", xPercent:-50, yPercent:-50})

You should also change your pen to the latest version of GSAP (1.19.1). Right now you're using a two year old version (1.16). Please make sure you're using the latest plugins too. Here's a pen with all the Club plugins that you can use on CodePen.

 

http://codepen.io/GreenSock/details/OPqpRJ/

 

Happy tweening.

:)

Great! That looks good. 

 

Another issue I have run into is that it won't let me animate another instance of #blip. Do I need to make a #blip2, #blip3, etc shape to animate this shape more than once?

motionPath = MorphSVGPlugin.pathDataToBezier("#mp1", {align:"#blip"}),
motionPath2 = MorphSVGPlugin.pathDataToBezier("#mp2", {align:"#blip"}),
motionPath3 = MorphSVGPlugin.pathDataToBezier("#mp3", {align:"#blip"});

function getBlip() {
   var tl_blip = new TimelineMax({repeat:-1});
   tl_blip
      .to("#blip", 1, {bezier:{values:motionPath, type:"cubic", autoRotate:true}})
      .to("#blip", 3, {autoAlpha: 0},0)
      .to("#blip", 1, {bezier:{values:motionPath2, type:"cubic", autoRotate:true}})
      .to("#blip", 3, {autoAlpha: 0},0)
      .to("#blip", 1, {bezier:{values:motionPath3, type:"cubic", autoRotate:true}})
      .to("#blip", 3, {autoAlpha: 0},0);
   return tl_blip;
}
Link to comment
Share on other sites

If I understand your question correctly... yes - multiple 'blips' each following their own unique path would require each to have a unique name. If you're making one of these for each of your paths on the map, you could use a loop to create a timeline for each one. That would save quite a bit of typing.

 

Does that help?

 

Happy tweening.

:) 

Link to comment
Share on other sites

If I understand your question correctly... yes - multiple 'blips' each following their own unique path would require each to have a unique name. If you're making one of these for each of your paths on the map, you could use a loop to create a timeline for each one. That would save quite a bit of typing.

 

Does that help?

 

Happy tweening.

:)

Hi! I made 3 instances of blip ( #blip1, #blip2, #blip3) in the shapes group. edit: I got all 3 to work but they play together. I am trying to make them play one after another.

 

See the Pen gmBwpd by beckbeach (@beckbeach) on CodePen

Link to comment
Share on other sites

You've got the code mostly right. You have all the tweens with a position parameter of 0 so they all start at the same time. Just remove that and they'll play in sequence.

 

The pen is also still using the outdated version of GSAP. Please click the little gear icon on the JS panel and delete TweenMax 1.16. Then use the Quick-add drop-down to add version 1.19.1. 

 

Happy tweening.

:)

Link to comment
Share on other sites

You've got the code mostly right. You have all the tweens with a position parameter of 0 so they all start at the same time. Just remove that and they'll play in sequence.

 

The pen is also still using the outdated version of GSAP. Please click the little gear icon on the JS panel and delete TweenMax 1.16. Then use the Quick-add drop-down to add version 1.19.1. 

 

Happy tweening.

:)

Ok I did. Thanks. I hope my boss likes this. He may want them randomized too. *yanks hair out* :o

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