Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Pen061

Page transition with TimelineMax to another page

Go to solution Solved by Rodrigo,

Recommended Posts

Hi everyone! This is my very first time trying using Gsap, so probably what I am trying to achieve is beyond my league, but since I love it, I really wanted to give it a try!

 

I am trying to make a website with a H1 text animation -which works thanks to the tutorial I followed- but I would love to add now a page transition always with TimelineMax (if possible, of course). Basically, by clicking on an image, this image will bring to another html page. After the click, I'd love a full page transition.

 

Now, I already found on this forum something similar, which I tried to replicate... but it's not working, and being such a newbie with Gsap, I don't know exactly why. Is it because the example I took inspiration from shows a transitions between 2 images in the same page -while I'm targeting a new html?

 

I'm adding a very basic CodePen of the similar code I'm using on the actual page. Thanks to anyone in advanced!

See the Pen MWJVEqg by Penelope79 (@Penelope79) on CodePen

Link to post
Share on other sites

Hi and welcome to the GreenSock forums.

 

Indeed the fact that you're pointing to a new URL is making this break. If you remove the onclick="location.href='new-page.html'" attribute from the image it works. Unfortunately if you want to create some sort of transitions between pages, you can't use regular links, because when that happens the entire page is replaced by a new one, so you won't see a seamless transition between one page and the other. If you want to do that you'll have to use a library like Vue, React, Svelte, etc. that can handle routing for you without reloading the entire thing. On that note, since you're just starting in this area I'd strongly recommend you to get familiar with HTML, CSS and JS first, before diving head first into learning those libraries I mentioned above.

 

There is a ton of stuff in youtube that can help you get started, here are two channels filled with great learning resources:

 

https://www.youtube.com/c/TraversyMedia/videos

 

https://www.youtube.com/c/Freecodecamp/videos

 

You can search within those channels in order to look for HTML, CSS and JS starting videos.

 

Happy Tweening!!!

  • Like 1
Link to post
Share on other sites

@Rodrigo First of all, thank you so much for your reply -and the warm welcome!

 

And thank you for confirming my doubt. At least, now I know the reason! I want to keep things simple and within my capabilities, hence I'm not going to dive into Vue or React 😄.

So basically, if I want to try to make it work, I should keep the "content" I want to reach after the transition on the same page, right? Like a modal?

Link to post
Share on other sites
5 minutes ago, Pen061 said:

So basically, if I want to try to make it work, I should keep the "content" I want to reach after the transition on the same page, right? Like a modal?

Indeed, just keep it there, outside the viewport and bring it in using GSAP like the sample in the other thread you mention.

 

Happy Tweening!!!

  • Like 1
Link to post
Share on other sites

Thank you so much!!!!! 🙏

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    No registered users viewing this page.

×