Tristan Landry

Thank you so much !?

Thanks Cassie for the answer and the precision on flex. I'm using Inkscape and would indeed appreciate your tips! Tristan

Hi there, I've been trying to morph two paths inside a SVG but the result is weird: the morphed svg moves to the left side of the screen while the "end" path stays visible in the middle. Is the CSS the cause of my problem? Thanks in advance for your help. P.S. This is for a conference on similarities between the two totalitarian states. I am a scholar. Tristan

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

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

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: https://codepen.io/cybergastronom/pen/RwZywLa 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

Thanks, I did not think of the Arrow function - it works!

Hi, I am trying to code a storymap with GSAP's ScrollTrigger. I cannot figure out how to call a Leaflet function with ST. I tried this code: ScrollTrigger.create({ trigger: "intro", onEnter: map.setView([-300,425], 3); }); but it makes my map disappear. You can find my whole code on this codepen: https://codepen.io/cybergastronom/pen/gOmWeRV As you already figured out, I am a newbie to coding... Already done one storymap though with Waypoints and Leaflet (the JS library for interactive maps): gastropoliti.ca. Tristan