How to start an animation only in a specific page load

[cecileRX]

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();

});

[Rodrigo]

Hi @cecileRX and welcome to the GreenSock forums!

 

The issue is that when you're adding the load event to the window object:

https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event

 

So when that happens your timeline will run. If you want to run the animation on the click event of a specific element, then add the click event listener to that particular element and play the timeline then. Something like this:

const tl = gsap.timeline({ paused: true });

tl.to('image', {
  duration: 1,
  scale: 0.2,
  x: -1,
  y: 0
});

const page2Link = document.getElementById("page2Link");
page2Link.addEventListener("click", function () {
  tl.play();
});

If you keep having issues, please remember to include a minimal demo so we can take a closer look at your code and see what could be the issue.

 

Happy Tweening!

[cecileRX]

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?

See the Pen QWBOQXB by cecileRx (@cecileRx) on CodePen

 

[mvaneijgen]

Hi @cecileRX that would be a cool effect, but sadly this is not something that browsers do by default. Each page link is a new request (I don't know the technical terms for it), but the browser will reload the page while navigating to a new page. There are some tricks you can do to fake the browser not refreshing, but usually people grap a Framework that have this feature. Vue.js, SvelteKit and React.js spring to mind. 

 

I've forked your demo and add an event.preventDefault(); to your click listener, to stop it from loading the new page, this way you can see it is working, but having the page load without the browser refreshing is not something I would have a beginner figure out. You could load all the content on the same page and have it show and hide with Javascript, but that will get really technical really fast and is not part of the scope of this forum. Hope it helps and happy tweening! 

 

See the Pen qByVomq?editors=1011 by mvaneijgen (@mvaneijgen) on CodePen

[cecileRX]

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.

 

[Rodrigo]

Hi,

 

I'm a framework guy so normally I'll use either Vue or React and leverage their routing system for something like this. I know that there are some Vanilla JS alternatives such as Taxi and Barba. I've never used them so I can't tell you much about them, but you should take a look at them and see how they work:

https://taxi.js.org/

https://barba.js.org/

 

Hopefully this helps.

Happy Tweening!

[cecileRX]

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