Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

Search the Community

Showing results for tags 'paths'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests

Found 3 results

  1. 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.
  2. I've been having some fun with the Bezier Plugin and am starting with a set of path options for the user to choose from. I've been looking for a way to change a given path's points to fill any stage size by either height or width. I set up a starting point in the codepen with a select menu to resize and an example path. I wondered if there might be a hidden gem in GSAP's amazing arsenal that would be able to do this conversion of points. Fingers crossed!
  3. Hi, Is it possible to animate a filled path so it effectively draws like the drawSVG plugin does for stroked paths? Will it be a case of having to learn how to animate SVG coordinates (if this is even possible?). I have seen a (somewhat complicated) method on StackOverflow on how to convert a filled path into a stroked path. Any tips / suggestions on further reading on how to create a 'draw' effect on filled paths would be wonderful (if it is possible to do). Thanks, Emily.
×