Search the Community
Showing results for tags 'seamless'.
Found 3 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
-
Apologies for starting yet another "carousel" related topic, but I was hoping some of the brilliant minds here could help me out. Is there a way to use GSAP to create an infinite looping "carousel" style animation that doesn't repeat the first element in the list, like this embedded CodePen? Mind you: I'm not looking for fancy controls to start or stop or reverse anything, just a simple, clean way to loop a bunch of items that also makes sense in a screen reader type of environment—no repetitions of items in the source code.
-
Hi, i realise this is way too similar to this thread: http://forums.greensock.com/topic/4683-mp3loader-making-a-perfect-loop/ but since this is about a video, not an audio (and therefore, I don't have the "repeat" property), I thought I'd ask. My idea is to loop a video that I've loaded using VideoLoader, but I want it to be a seamless loop. My first (and obvious) approach was adding a listener for the VIDEO_COMPLETE event on the video, and then play the video again from 0: var video:VideoLoader= LoaderMax.getLoader([videoId]) as VideoLoader; video.addEventListener(VideoLoader.VIDEO_COMPLETE, onVideoComplete); protected function onVideoComplete(event:LoaderEvent):void { var video:VideoLoader= event.target as VideoLoader; video.gotoVideoTime(0); video.playVideo(); } but this doesn't make it seamless, it freezes on the last frame of the video for a second or two, and then starts again. My second approach was adding a listener for the PLAY_PROGRESS event, and when the video reaches a certain sufficient point, start it from 0: var video:VideoLoader= LoaderMax.getLoader([videoId]) as VideoLoader; video.addEventListener(VideoLoader.PLAY_PROGRESS, onVideoComplete); protected function onVideoComplete(event:LoaderEvent):void { var video:VideoLoader= event.target as VideoLoader; if(video.playProgress >= 0.95){ video.gotoVideoTime(0); video.playVideo(); } } this made it better, but the same problem stays, it freezes (now not on the last frame, but on one of the last ones) and then starts all over. Is there a way to have a smooth loop, or another approach to make it smoother than these two I've tried? Thanks!
.thumb.png.ff08a29e7d321b3dff6d2d8622eb4a67.png)
