Page transitions with GSAP

At a glance

The community member uses GSAP to animate page changes on their website. They have a process where a black area is animated over the viewport when a user clicks a link with the class ".has-page-transition", and the new page content is revealed once the page has finished loading. However, the community member is facing issues where the links do not get their active CSS styling, and the animation is only triggered on the main navigation, not on other links. They assume this is due to the routing and single-app structure of their website, and they are seeking input to customize their script.

The comments suggest the community member could try setting a CSS variable instead of a class, or defining the class in an HTML embed via a style tag. Another community member mentions an issue where the animation worked initially but not when returning to the page, and suggests the problem is likely in the script, possibly due to not re-initiating the animation correctly.

The comments also include links to resources on HTML embeds and adding GSAP animations in the community member's platform, Webstudio.

Useful resources

MMajima-San

I use GSAP to animate the individual page changes. The process is as follows:

user clicks on a link that has the class “.has-page-transition”
black area is animated from left to right over the entire viewport so that the page content is not visible
the new page is loaded, the black area is still displayed
as soon as the page has finished loading, the black area is animated from left to right to show the new content

Unfortunately, I encounter several problems:

the links do not get their active css styling, I thought it would be enough to pass the class “.active” to the links
my animation is only triggered in the main navigation, not on normal links, such as “read about me” or the first project “Canyon Bicycles” at the bottom in the project list.

I assume that it is due to the routing and the single app structure of webstudio. Can you give me some input so that I can customize my script.

5 comments

OOleg Isonen

instead of seting a class, you could set a css variable

OOleg Isonen

or set the class but define your class in html embed via style tag and set the variables

OOleg Isonen

https://share.descript.com/view/DpdO8izrONZ

initially I clicked on the button and it animated, then when I got back to that page it didn't, the isssue is in your script

OOleg Isonen

most likely you are not reinitiating the animation or doing some other mistakes

OOleg Isonen

https://docs.webstudio.is/university/core-components/html-embed

https://docs.webstudio.is/university/how-tos/how-to-add-a-gsap-animation

Add a reply

Join the Webstudio community

Page transitions with GSAP