Trigger GSAP from HTML file

[bakisb]

Hey There!

I am very new on GSAP. ( and also on codes )

I prepare a simple timeline, and I want to make timeline started, when it is triggered from html side.

 

Because, I want to put those pages in a playout system. That is loading pages way before they are going to be at stage, when all the animations already played...

But there is a code to communicate to the system, saying, ok its your turn to the page... 

Which I want to add a trigger code, to start my anims on js file...

 

I tried to find some but there are nothing but the scroll trigger

 

Would anyone helps please...

 

Regards.

Bakis

 

[GreenSock]

I'm not sure I understand your question and you didn't provide a minimal demo so it's difficult to know the context, but it sounds like you need to just wrap your animations in a function, and then only call that function when that page is displayed. This isn't really a GSAP-related question - it's an application engineering one. We really try to keep these forums focused on GSAP-specific questions if possible.

 

Happy tweening!

[bakisb]

well, thank you for quick response

this is my js file code;

 

var gstl = new gsap.timeline({ defaults: {duration: .5}})

 

gstl    

    .fromTo('.bg2', {x: '-100vw'},{x: '0vw'})

    .fromTo('.habergorsel', {x: '-100vw'},{x: '0vw', ease: 'back'})

    .fromTo('.haberbaslik',{scale:'0'},{scale: '1', ease: 'back'},'<')

    .fromTo('.haberspot',{y: '100vw'}, {y:'-14.1vw', ease: 'power3'},'<')

    .fromTo('.timefg', {scaleX: '0'},{scaleX: '1', ease:'none', duration: '10'},'<')

    .fromTo('.bg2', {opacity: '1'}, {opacity: '0'})    

 

and this is the code that I want to trigger the one above, from html file;

 

function BroadSignPlay(){ //set up

  gsap.timeline.pause()

}

 

and it is not working

 

thank you.

 

 

[ZachSaucier]

A couple of issues:

1. You don't need the new keyword when creating timelines.
2. When trying to use a control method (like .pause()) on a tween or timeline, you need to use a variable of that tween or timeline. For you that'd be:

   gstl.pause()

    

Side notes:

• 0.5 is the default duration in GSAP so you could probably leave that out.
• It's best to use relative tweens (.to() and .from()) instead of .fromTo()s whenever you can.

I think you'd learn from my article about animating efficiently.