Jump to content
Search Community

ScrollMagic + TweenMax: Draw multiple SVG paths simultaneously?

JoSch 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 just started out working with GASP, taking baby steps.

 

The first thing I wanted to do, was to use ScrollMagic to draw a SVG path (inside a container) as the page is being scrolled through. I heavily relied on this ScrollMagic example when setting this up. This is my current script:

 

// Prepare SVG
function pathPrepare_journey($el) {
  var lineLength_journey = $el[0].getTotalLength();
  $el.css("stroke-dasharray", lineLength_journey);
  $el.css("stroke-dashoffset", lineLength_journey);
}

var $journey1 = $("path#path1");
var $journey1_2 = $("path#path2");
var $journey1_3 = $("path#path3");

pathPrepare_journey($journey1);
pathPrepare_journey($journey1_2);
pathPrepare_journey($journey1_3);

// Reference to container
var container = $("#section1");
var containerHeight = $(container).height();
var vpHeight = $(window).height();

// Init controller
var SVGcontroller_journey = new ScrollMagic.Controller();

// Build tween
var tween_journey = new TimelineMax().add(
  TweenMax.to($journey1, 1, { strokeDashoffset: 0, ease: Linear.easeNone })
);

// Build scene
var scene = new ScrollMagic.Scene({
  triggerElement: container,
  duration: containerHeight - vpHeight / 2,
  tweenChanges: true
})
.setTween(tween_journey)
.addIndicators({
  name: "Draw Journey Lines#1",
  colorTrigger: "brown",
  colorStart: "brown",
  colorEnd: "brown",
  indent: 600
})
.addTo(SVGcontroller_journey);

 

It works perfectly fine, but as you can see, I have three individual paths inside my SVG ($journey1, $journey1_2 & $journey1_3), and the ScrollMagic scene currently only draws one of them, $journey1, because I was only able to add that one to the TimelineMax(). 

 

My simple question: How do I add the other paths so they are drawn at the same time as $journey1?

 

I was able to add the other paths, but they are being drawn consecutively:

 

// Build tween
var tween_journey = new TimelineMax()
.add(
  TweenMax.to($journey1, 1, { strokeDashoffset: 0, ease: Linear.easeNone })
)
.add(
  TweenMax.to($journey1_2, 1, { strokeDashoffset: 0, ease: Linear.easeNone })
);

 

I appreciate any help with this. Thanks.

Link to comment
Share on other sites

Hi @JoSch,

 

Welcome to the GreenSock Forums.


If you have specific GSAP problems or questions, we're happy help. Providing a demo wants to get you the best possible answers. More info:

 

Here's an example of tweening several objects by class or id at the same time:

 

See the Pen VGpegd by mikeK (@mikeK) on CodePen

 

Please take a look at this info: position-parameter

 

Happy tweening ...

Mikel

 

 

  • Like 4
  • Thanks 1
Link to comment
Share on other sites

Thank you for your reply @mikel!

 

Below is a CodePen demo of my code, thanks for making me aware of the need to provide one. In the CodePen, the first path is being drawn as desired, from the top of the page, as the page is being scrolled. The other paths are not in the timeline yet.

 

Thanks also for you're example. I don't quite understand how the chaining/sequencing of animations works, I wasn't able to fully implement your solution (it also uses DrawSVG which I don't have access too). How would I have to put my three paths into the timeline to be drawn at the same time, without using DrawSVG? 

 

See the Pen NLpbKW by joSch (@joSch) on CodePen

 

Link to comment
Share on other sites

Happy to help. :)

 

When you have multiple elements that need to do the same thing it's usually best to give them a class and use that as your target. That being said there are many ways to target all three paths from your demo and have them start at same time. 

 

You can add all three with an array like this:

tween_journey.to([$journey1, $journey1_2, $journey1_3 ], 1, { strokeDashoffset: 0, ease: Linear.easeNone });

 

You could also use three separate tweens and add the position parameter of 0 to have them all start at the same time like this (this is what @mikel was talking about):

tween_journey.to($journey1, 1, { strokeDashoffset: 0, ease: Linear.easeNone }, 0);
tween_journey.to($journey1_2, 1, { strokeDashoffset: 0, ease: Linear.easeNone }, 0);
tween_journey.to($journey1_3, 1, { strokeDashoffset: 0, ease: Linear.easeNone }, 0);

 

Again, using a class is the most efficient way to do it, but I wanted to point out the other ways to target the elements. The position parameter is best when you have different tweens, but want them to start at the same time.

 

Hopefully that helps a bit. 

 

Happy tweening.

:)

 

  • Like 3
  • Thanks 1
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...