Jump to content
Search Community

template function for lot of object : Add, Call ?

DNaoures 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

Hello everybody, 

 

i've a SVG file with lot of objects and I want to animate them in a Timeline.

These objects can be complex (a group with 2 or 3 shapes and paths) and i want create a function for each type of object (arrow, people, explanation,...) and call function in a timeline (with object in parameter).

 

 

For exemple,  a arrow object :

<g id="fleche2">
	<g>
		<path class="st0" d="M56,237.5v43v31v23v53c0,5.5,4.4,10,9.9,10h87.9c5.4,0,9.9-4.5,9.9-10v-97c0-5.5,4.4-10,9.9-10h116.5"/>
		<g>
			<polygon class="st1" points="287.3,276.8 288.9,280.5 287.3,284.2 296,280.5 			"/>
		</g>
	</g>
</g>

 

 

To animate the arrows, I use this function (with 2 parameters : arrow id and rotation angle) :

function animeArrow(flecheInput,angle){
              
        var fleche=flecheInput
        var arrow = fleche.find('path')
        var arrowHead = fleche.find ('polygon')

        var motionPath = MorphSVGPlugin.pathDataToBezier(arrow, {align:arrowHead});

        TweenLite.set(arrowHead, {xPercent:-50, yPercent:-50,  transformOrigin:"center center"});
        TweenLite.to(arrowHead, 15, {bezier:{values:motionPath, type:"cubic", autoRotate: angle}});
        TweenMax.fromTo(arrow, 15  , {drawSVG: '0% 0%'}, {drawSVG: '0 100%'})
    }

 

and to set it in a timeline :

 var tl = new TimelineMax();
        tl
            .call(animeArrow,[($("#fleche1")),270],this, 1)
            .call(animeArrow,[($("#fleche2")),0],this, 15)
            .call(animeArrow,[($("#fleche3")),90],this, 30)
            .call(animeArrow,[($("#fleche4")),180],this, 45)
            .add( function(){ console.log( this.progress() ) } )
            .call(animeArrow,[($("#fleche5")),45],this, 50)

 

This option works well but i'm not sure if it's the best way to manage Timeline (play, reverse, progress) and I must put manually the delay for each arrow.
And to add and manage other animation in this timeline, it's not easy...

 

Have you some ideas or example to improve my option  ?

Thanks a lot !

 

 

Link to comment
Share on other sites

Hi,

 

It is very smart of you to create functions to do repetitive tasks for you! 

As you probably noticed, the animations you are creating are not really added to a timeline.

You are using a timeline to schedule the calling of functions that create some animations.

 

The trick here is you want your functions to create timelines and then return them.

 

Here is a very basic example that shows how you add timelines that are created by a function to a master timeline:

 

 

var master = new TimelineLite();
function moveObject(selector, amount){
  var tl = new TimelineLite()
  tl.to(selector, 1, {y:amount})
    .to(selector, 1, {x:amount})
  return tl;
}
//add to the master timeline whatever the moveObject() function returns
master.add(moveObject(".green", 50))
master.add(moveObject(".orange", 100), "+=1")


 

See the Pen PmRQQq?editors=0010 by GreenSock (@GreenSock) on CodePen

 

 

PointC uses this technique to make this amazing animation that has a bunch of nested timelines here:

See the Pen ?editors=0010 by PointC (@PointC) on CodePen

 

 

 

 

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