Leaderboard

Ok. So literally two weeks ago I didn't know what Nuxt was, but thanks to the wonderful people in this forum, they have helped me get to this stage. My new site in progress with seamless Nuxt3 Page Transitions: gsap.windpixel.com.au. But back to your problem, I added this css into the style.css file to allow both entering and leave pages to be overlapped. They get added into the DOM at the same time, so by default, they stack giving un desirable effects. Here is a working demo for of yours with seamless transitions: https://stackblitz.com/edit/nuxt-starter-sxwssz?file=helpers%2FtransitionConfig.js .page-transiton-enter-active { position: fixed; height: 100%; width:100%; top:0; left:0; right:0; bottom:0; z-index:9; } .page-transiton-leave-active { position: fixed; height: 100%; width:100%; top:0; left:0; right:0; bottom:0; /* z-index:4; */ } I added back the logic to track when page transitions are starting and ending, this is vital to the site working as you need to fire and cleanup certain things when the pages are done. I also made a const to handle the duration for enter and leave, these should be the same so makes sense to tie them together. import gsap from 'gsap'; import { useTransitionComposable } from '../composables/transition-composable'; const { toggleTransitionComplete } = useTransitionComposable(); const duration = 0.6; const pageTransition = { name: 'page-transiton', mode: '', onEnter: (el, done) => { gsap.set(el, { yPercent: 100 }); gsap .timeline({ paused: true, onComplete() { toggleTransitionComplete(true); done(); }, }) .to(el, { yPercent: 0, duration: duration}) .play(); }, onLeave: (el, done) => { toggleTransitionComplete(false); gsap .timeline({ paused: true, onComplete: done }) .to(el, { duration: duration }) .play(); }, }; export default pageTransition; I hope that helps. If your journey is anything like mine, you will encounter quite a few problems to solve, but once you get past that, full page transitions are amazing! - Lance

@Cassie, Thank you so much for your incredibly helpful guidance! Your explanation about organizing the ScrollTriggers using .sort() and the approach to adjusting the end trigger based on the pinned section was invaluable. I truly appreciate the time and effort you took to clarify the complexities I encountered in my animations. Your expertise and support have provided me with a clear direction to enhance my project. I'm deeply grateful for your mentorship—it's been immensely beneficial! Warm regards, @Dev Hardik

Hi Archimedo, Here is one (very rushed) solution.. Firstly, I notice that you didn't add Scroll Trigger to the pen, so make sure that you add scroll trigger, and then register it. gsap.registerPlugin(ScrollTrigger); I noticed you had added 2 different coloured sections. So I guess thats how you want to group them. I have made a bit of a quick setup, but the general idea is to get each .wrapper ( I have called theme scenes in this case ), for each of them create a timeline with a scroll trigger, then within those scene objects, we go get all the lines, and add tweens to the timeline. In this case I have pinned and scrubbed the timeline if you want to force people to watch. https://codepen.io/windpixel/pen/gOErGQd Or we can turn pin off and scrub off for a different effect: https://codepen.io/windpixel/pen/rNReGEM I hope this helps, let me know if you have any questions about it.

Yeah, unfortunately my route to fix something like this would be to work through all the code until I understand it, then isolate out each animation, get it working individually and then once I'm sure the pieces work individually, carefully integrate it all together again. That's a time consuming process, we're good at pinning down GSAP related issues but this is definitely in the tangly logic arena, and that takes time. It's strange to me that the arrows are affecting the dots differently than if you click on them directly. That's a big red flag for me. They should behave the same, so the arrows or the dots should just be different 'events' that lead to exactly the same code being run. I reckon if you untangle this and rewrite it to run exactly the same function at those points you may solve a key issue. Good luck!

Heya! So GSAP doesn't know what order your element are in visually. All it knows is the order the elements are in in the HTML (DOM). If I were you I'd create an array in JS that has the menu items in the order you need them and then stagger that array, or you could physically reorder the items in the DOM yourself Hope this helps. ✨

Hi! It's important to create your ScrollTriggers in the order they appear on the page, you can't do that in this example because you're looping around for the colours. You can use .sort to reshuffle and organise your scrolltriggers if you can't define then in the right order. https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.sort()/ You don't need to pin the content, so you don't need pinContainer - you can just pin the horizontally scrolling section. If you do this you'll also need to change the end trigger based on whether the section is pinned or not. let isPinned = elements.classList.contains("pin"); ScrollTrigger.create({ trigger: elements, start: "top center", end: () => isPinned ? `+=${scrollList.clientWidth - introWrapper.clientWidth}` : "bottom 60%", ... }) https://codepen.io/GreenSock/pen/bGZpvzp?editors=0011 I hope this helps!

Hi @jama1017 welcome to the forum and thanks for being a club member 🎉 I'm not completely sure what it is you're looking for, that said this was the first thing that sprang to mind https://gsap.com/docs/v3/Plugins/MotionPathPlugin/static.convertCoordinates() with the demo at the bottom of the page. https://codepen.io/GreenSock/pen/GRJEGzB

Got it, that's what i was wondering. Thank you so much, have a nice dayy ☺️

Super. I'm glad it worked out. Have fun!

Like @Cassie said, Flip effects are typically for very dynamic situations where you immediately capture the state, change it, and then animate to the new state (and you're done), but it looks like you're trying to go backwards again and scrub that animation, reusing it over and over. The issue here is that Flip intentionally removes the position: absolute on the elements when the Flip animation completes. So then when you're scrubbing backwards, those elements don't have position: absolute again. You can use an onUpdate to sense that and fix it: https://codepen.io/GreenSock/pen/WNmwXRv?editors=0110 But again, that's not typically what Flip is for, especially because it isn't really responsive since all the positioning is grabbed at the time you start the animation, thus if you resize the window that could change. You could work around that in various ways, but I just wanted to make you aware of it.

You can't just point at an entire <svg> file and tell it to morph into another entire <svg> file, no. Each morph occurs on a single <path> element (it's animating the path's "d" attribute). Does that answer your question? If all your artwork in a particular <svg> has a single fill style, then you should be able to merge all the paths into a single <path> that you could morph. Most editors allow you to do that.

Howdy, @h-amad. I would engineer it in a very different way: https://codepen.io/GreenSock/pen/vYPGOJp?editors=0010 It's much more performant and simple. It also works correctly on scroll which is a challenge in and of itself. Is that what you're looking for?

A GSAP tween works based on what you tell it to animate, if it encounters an array and you tell it to stagger it will animate your array one by one. See here your original code where we console.log() the chars you want to animate. As you can see there are 64 items in the array and you tween tells them to aniamte in a staggered fashion one by one. https://codepen.io/mvaneijgen/pen/KKEKGwa?editors=0011 Below a pen with updated logic and some other tweaks. I’ve placed some comments in your JS to better explain things, please be sure to read through them! Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/GReRYRV?editors=1010