Call animation after arrow function

[Tristan Landry]

Hi everyone, 

I am new to GSAP and JS in general, so excuse my lack of knowldge, but I am looking for a way to call an animation using the arrow function. See my code here: 

So, I want to trigger multiple functions, bound with the kewyword this.

It works well for all the Leaflet functions, but I can't find a way to call my animation.

Any clue?

Here's an excerpt of my code:

onEnter: () => {
  this.map.flyTo([45.405, -71.892], 16),
  this.map.removeLayer(basemap),
  this.map.addLayer(osmBasemap),
  this.Strathcona.addTo(map)},
  onLeave: () =>      Strathcona.removeFrom(map),
onEnterBack: () => {
  this.map.removeLayer(osmBasemap),
  this.map.addLayer(basemap),
    Strathcona.addTo(map)},
onLeaveBack: () => Strathcona.removeFrom(map)
    })  

Tristan

See the Pen RwZywLa by cybergastronom (@cybergastronom) on CodePen

[OSUblake]

Hi Tristan,

 

Based on the CodePen you provided, you should not be using this, so you should probably remove that. this is mostly used inside methods of a class or object, or scoped functions, which you don't have.

 

As for the calling an animation, I'm not sure what you are referring to as there is no GSAP code in your callbacks.

[Tristan Landry]

Thanks. I guess I should read more on this. 

As for my GSAP code, the animation timeline is defined a little sooner :

 

var animation = gsap.timeline({paused: true, trigger: ".Strathcona"})
/*ma variable est associée à la fonction gsap timeline
qui contient elle même une autre variable nommée animation*/
animation
/*cette variable contient les diverses étapes qui composent mon animation. La première étape consiste en une méthode GSAP nommée .fromTo. Comme son nom l'indique, elle permet de définir un état de départ et un état d'arrivée d'un objet ici identifié par sa classe CSS, soit .titre. */
  .fromTo(".titre", {x:0, y:0}, {autoAlpha:1, x:0, y:100, color: "red", ease: "back(6)", duration:3})
/*donc l'objet .titre a une position initiale définie par ses X et ses Y, soit son positionnement horizontal et vertical. Il a aussi une opacité initiale de zéro, donc il est au départ invisible. Il bouge ensuite verticalement de 100px vers le bas, et devient visible. Le tout pendant une durée de 3 secondes. Le dernier paramètre, ease, permet de définir le comportement, soit ici un effet de rebondissement*/
  .to(".titre", {xPercent:100, duration:2})
/*suite à la complétion de la première animation, on fait disparaître .titre avec la méthode .to, qui l'envoie littéralement 100% plus loin le long de l'axe horizontal, de façon à ce qu'il disparaisse, et le tout prend 2 secondes.*/

ScrollTrigger.create({
    trigger: ".Strathcona",  /*c'est l'élément déclencheur*/
    start: "top center", /*on définit où l'on veut que l'animation soit déclenchée, soit ici au milieu de la page*/
onEnter: () => {
  this.map.flyTo([45.405, -71.892], 16),
  this.map.removeLayer(basemap),
  this.map.addLayer(osmBasemap),
  this.Strathcona.addTo(map)},
  onLeave: () =>      Strathcona.removeFrom(map),
onEnterBack: () => {
  this.map.removeLayer(osmBasemap),
  this.map.addLayer(basemap),
    Strathcona.addTo(map)},
onLeaveBack: () => Strathcona.removeFrom(map)
    })  

My problem is on how to call it after the arrow function.

TL

[OSUblake]

I'm still unsure of what you're asking. Call it after what function?

 

Your timeline code has a trigger in it, but that's not valid. If you want your animation to be part of the ScrollTrigger, you would add it as the animation.

 

ScrollTrigger.create({
  animation: animation,
  ...
})

 

[Tristan Landry]

Thanks for your help. I took out the this keyword, and it works as fine. As for triggering the animation along with other Leaflet functions, I found that this line works just well:

onEnter: () => {
  animation.play(),

//animation being the name I gave to my GSAP timeline
  map.flyTo([45.405, -71.892], 16),
  map.removeLayer(basemap),
  map.addLayer(osmBasemap),
  Strathcona.addTo(map)},

 

Thanks again for the great support.

GSAP forever!

TL