Search the Community
Showing results for tags 'page transition'.
Found 9 results
-
Hello there, Im trying to achieve a specific page transition using nuxt 3 and gsap. I saw the starter code of a simple page transition when you define a custom transition in a seprate file and import it in every page using definePageMeta function and the specify the pageTransition to the one you defined and it work, however i want a specific pattern. I'm going to explain my situation using tailwindcss What I'm trying to achieve is this: Make a page transition that have a div initially with 'absolute w-full h-full bg-black top-0 left-0 ' so this div is covering the hole page even the default layout. On onEnter i want to translateY by -100% so the page and the layout is visible. On onLeave set translateY by 100% then animate translateY by -100% ... This easely achievable using gsap However the implementation in nuxt 3 is hard i think, i couldn't do it because in the page transition if i the definePageMeta the el the return in the onEnter or onLeave is the root of the page ex: index.vue And if i add and another div in index.vue i got an error about the Transition component can't do animation if there is not one root element , i tried to make a seprate component for the transition and add this component inside every page however the animation did not triggered for the onEnter and onLeave methods when change routes using the NuxtLink component or use router.push('url'), i don't know where is the problem, if anyone knows how to do this, please help, Visit Dennis website and try to change routes you will understand what i want to achieve. And thank
-
I wish to make some DIV's expand and take up the full screen when clicked on. . I cant just animate their height and width to 100% because this would only work if they are in the top left of the screen when clicked, if they are anywhere else they will end up partially off screen. Would the following steps achieve the effect I want 1) Place the DIV inside a parent DIV (so that I can place absolute positioning on it as default) 2) When clicked - change its position to fixed - animate its top and left properties to 0 - animate its height and width to 100%
-
Good day, I'm looking for a freelancer who can help me with a page transition on https://bogun-dunkelau.de/referenzen Portfolio items are opening in modals, the link section before the footer should: - extend to the top of the screen - change background transparency towards 0 - change blurriness towards 0 - close modal with hideModal(currentURL); when end is reached. What I have created so far: https://codepen.io/hpmacher/pen/eYJLpbJ Unfortunately I don't get any further. Please send me a pm to let me know your hourly rate and how long this would take. Thank you! Johannes -
Dear forum participants. I need your professionalism in coding. I can’t understand what is used to achieve effects such as in these examples: 1. When you click on any project from the bottom up, the rounded form of the divlock block https://jesperlandberg.dev/ 2. a very similar effect we can see when you click on the menu at https://www.chiaraluzzana.com/about 3. when you hover over any project + when you click on this project, a similar effect appears https://www.martinehrlich.com/ I hope I threw off enough examples to understand what I mean. I want to achieve a smooth distortion of the standard div block. With CSS, this smooth effect is not possible. Please tell me the script or explain how to repeat it? I also found a library with a similar menu, but I don’t quite understand whether it is or not: https://tympanus.net/Development/OffCanvasMenuEffects/bubble.html
-
Hi all- When this site first loads, and also when you click the menu button, there is a beautiful transition with their logo in black and white. How can achieve this effect with a different logo that's shaped like a triangle of 3 sections (image below)? Reference website: https://www.cahnwilson.com/ Thank, - Martyn
-
Hi guys, is it possible to create page transition like this one https://tympanus.net/Development/PageFlipLayout/ I really want to create something like that, but I don't know where should I start? Thanks in advance
-
Hi everyone, I'm very new to GSAP and have little JS experience, but I'm rebuilding my portfolio and would like to implement something that seems very easy but I can't find anything on how to implement this properly. Basically what I want to do is trigger an animation when someone leaves the page (clicks a link), show a loading screen while the new page loads and when the page is loaded show an inverted animation. It's an overlay of the viewport that I want to animate. First of, is TweenMax suited to be used this way? And can this be achieved without using AJAX, so that it just fires on page leave, shows the loader en inverts the animation when the page is loaded? Animsition offers almost what I need with their overlay transition, but I need multiple layers of the overlay so was looking into TweenMax to achieve this. Hope someone can help me! Thanks!
-
Hello everyone, I have not been around in 8 years, since the foregone Flash days. But lately I have found my way back, again needing a pair of fancy green socks, so I have been recently lurking about trying to get my head around things again. What a great community this is with such awesome discussions, truly amazing talents and bright minds amongst the users. Its great to see Greensock still going so strong. In regards to Page Transitions: Recently I say this thread which make me think. I also spent time searching the forum pretty extensively, looking at various discussions and approaches. But in the end I still was left wondering -- I’m not sure if applicable but what about using localStorage as an approach ? Verse going the whole Single Page App (SPA) approach, etc., My thought is using localStorage in conjunction with timeline based functions for page “intro” and “outro” sequences specific to each page and saving the toggle state into localStorage to know which function or direction to play when coming or going between pages. Given GSAP’s powerful timeline capabilities, etc., it seems like it could be a viable option. Does this theory make sense, or am I missing the obvious in thinking to pair the two together? There seems to be very little discussion about localStorage or sessionStorage on the forum in general. So perhaps it would not be relative to how I am thinking it could be used, as it seems it would have already been discussed. I understand it begins to fall out of the scope of GSAP, but at least in my head they seem really applicable to be used alongside each other in many ways. Does anyone anticipate any drawbacks, issues, problems to this localStorage + GSAP approach for handling page transitions? If so please set my thinking straight. I would love to get some peoples thoughts, feedback or experiences before trying to go down the rabbit hole of pairing the two together. Especially if my initial thinking is flawed, and especially since I am just getting back into things after a long time away. Perhaps too much to chew off initially. Thanks in advance for any feedback anyone may offer, again great community!
-
I don't know if this is an adequate post, but I wanted to know the input from GSAP pros regarding SmoothState.js http://miguel-perez.com/ (Click on the blog posts since they are the only internal pages. It seems like there is not a good demo about it) It creates incredibly smooth transitions from one page to the other. Could the same be accomplished using GSAP?
