Pen061 Posted April 13, 2021 Share Posted April 13, 2021 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 comment Share on other sites More sharing options...
Rodrigo Posted April 13, 2021 Share Posted April 13, 2021 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!!! 1 Link to comment Share on other sites More sharing options...
Pen061 Posted April 13, 2021 Author Share Posted April 13, 2021 @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 comment Share on other sites More sharing options...
Solution Rodrigo Posted April 13, 2021 Solution Share Posted April 13, 2021 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!!! 1 Link to comment Share on other sites More sharing options...
Pen061 Posted April 13, 2021 Author Share Posted April 13, 2021 Thank you so much!!!!! ? Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now