cecileRX

Thanks again @Cassie, I had no idea if this will-change property !

Thank you so much for your detailed answer and time @Cassie!

Yes it works! But I'm not sure to master the amount of resources used by the machines, so I was wondering. What is the best way to see how much a process is demanding ?

Hello, thanks for your answers. here is a codepen of the animation : https://codepen.io/cecileRx/pen/rNZNjwO

Hello, I have a SVG file on my home page with about 500 dots that I animate randomly as particles, using this basic GSAP tween: gsap.to('.particule', { duration: 200, y: "random(-200,200, 5)", x: "random(-200, 200, 5)", repeat: -1 }); Is it too demanding for the user resources or is it the right way to do it? Thanks!

Hello Rodrigo and thanks for your answer. Finally I found out that it was not a greensock problem. I had to check the URL change to trigger the animations when changing views. For those who have the same problem, I found this solution, which is not very elegant but works: function checkURLchange() { var newURL = window.location.href if (newURL != oldURL) { oldURL = newURL; setInterval(checkURLchange, 0); if (newURL === devHomePath) { animHome(); animLinksHome(); } else if (newURL === devAboutPath) { animAbout(); } } }

I am building a vanilla JS SPA where the nav links are on a svg image in the Homeview. They are working well the first time when clicked but after navigating to another view, the prevent default behavior is ignored and the animation is not fired . There is no error in the console so it's kind of hard to debug. Any Idea? I can't make a codepen as it's several files, but I have a<div id = "app"></div> on the index.html file where the html of the views is inserted dynamically, and here is the code of the index .js: document.addEventListener("DOMContentLoaded", function (event) { if (location.pathname === "/") { document.querySelector(".about-link").addEventListener("click", (e) => { console.log(e); if (e.currentTarget.matches("[data-link]")) { e.preventDefault(); explode(6, 6); var target = e.currentTarget.href.baseVal; console.log("target", target); setTimeout(function () { navigateTo(target); }, 2000); const textLinks = document.querySelectorAll("text"); gsap.to(textLinks, { duration: 2, opacity: 0 }); } }); } }); and the Homeview.js import AbstractView from "./AbstractView.js"; export default class extends AbstractView { constructor(params) { super(params); this.setTitle("Home"); } async getHtml() { return ` <div class="main-container"> <div id="molecule"> <svg version="1.1" id="calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 120.05 131.14" style="enable-background:new 0 0 150 150;" xml:space="preserve"> <a class='molecule-link about-link' href="/about" data-link> <rect id="about-link" x="3" y="5" fill="#fff" opacity="0" width="30" height="30"></rect> <text x="35" y="20" font-family="Inter" opacity="100" font-size="0.2rem" fill="#28ABE2">About</text> </a> <a class='molecule-link' href="/" data-link> <rect class="home-link" x="32" y="47" fill="white" opacity="0" width="40" height="42"></rect> </a> </svg>

Thanks Rodrigo, I am going to have a look on these.

Hello @mvaneijgen, Thanks for your demo! Do you think the steps below is the way to achieve what I want ? (not sure if I should use Ajax or History API or both!) Use Ajax to load content History API’s pushState() can also be used to alter URL without page reload. History.js should be used for consistent behavior across multiple browsers.

Hello Rodrigo, and thanks for your answer! I created a demo in codepen but I don't know how to incluse several pages so I am going to explain what I want from this. When clicking on the image 'about-link', the molecule should shrink and go up left then be displayed at this position on the about page. Right now it doesn't happen because the browser loads the about page before the animation is fired. Is there a way to do this? https://codepen.io/cecileRx/pen/QWBOQXB

Hello there and sorry if my question is basic, I am a newby in JS / GSAP. I have a main page with an 'image' menu with links. I want to animate that image for it scale down and go up when a link to page 2 is clicked, as a transition. Here is my code below. The problem is that the animation starts on the main page, which I don't want. const tl = gsap.timeline({ paused: true }); tl.to('image', { duration: 1, scale: 0.2, x: -1, y: 0 }); window.addEventListener("load", function () { tl.play(); });