Windpixel

Thanks Jack, Bang on, did some reading based on your suggestion and then by adding transform-style: preserve-3d; to the child and its perfect. Have a great day

Thank you Rodrigo, found exactly what I was after amongst those options

I am trying to use GSAP Split Text to do a 3D Cube Flip reveal animation per letter. Currently my Codepen will: rotationY: 90, but this quite basic. It looks ok, but how do I create the perspective you would see when the side of a face flips? Any help welcome

Using GSAP, I want to recreate the Button on enter Circle scale up and on exit scale down. Exactly like the "Get GSAP" Button on the top right of this website. Could anyone shed some light on where to start? Thank you in advance

Are you saying you want one full height 100vh screen with two horizontal sections in view? The first one scrolls horizontal scrolls all the way through and second one scrolls all the way across. Im sure we can can find a solution to what you are after, just need a little more clarity sorry

Hi fschaff, Thanks for the colour coded minimal demo, that made easy to see the issue. First thing I noticed is that the pin and horizontal end of the was happening too soon, so I inspected the width of the horizontal container holding your four slides. It was quite a lot less than the total width of the four slides. So I set a fixed width of 100vw to the slides, and then set the width of .horizontal to width: max-content. I did a couple of other minor tweaks to the colours just to check if the slides were moving ok. So I then think you wanted to add a second horizontal sliding section?, so if you duplicate the html for a second "set", the existing JS will try pinning all the containers, which wont work. So we need to apply the logic and gsap to each .container separately. In the demo below, the code loops throw all the ".containers" ( I call them scenes) , then the ."horizontal" sections and, then the slides, creates the timelines and pins only the parent "scene" for each. Please check the JS in the code pen below for e break down of what is happening in each line. Does this help? Please let me know if you have any questions. https://codepen.io/windpixel/pen/zYbByQe

You can make the default cursor a pointer as per code below, but having a look at my demo below. You can play videos and you can also drag. Add "cursor:pointer". Lots more tweaks and options can be made. Check out the docs here for more info: https://gsap.com/docs/v3/Plugins/Draggable/ Draggable.create(".scroller", { type: "x", bounds: ".tutorial-video-scroller-group", inertia: true, cursor: "pointer" }); https://codepen.io/windpixel/pen/jOJrypq

How about something like this? This has the basic functionality sorted (See my later post for another pen with some videos added) https://codepen.io/windpixel/pen/xxBOgpp

Might be a job for matter.js, which is a robust 2d physics library. https://brm.io/matter-js/ Here is a collection of Matter JS Code Demos to have a look through. https://codepen.io/collection/DPRzMX?cursor=eyJwYWdlIjo1fQ== - Lance

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

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.

Ok. I went away and played around and this works flawlessly. Ok, went away. All working fine. So to answer my questions, yep, you can gsap register effects elsewhere tap into them, use gsap.context for the clean up. I have window resize helper (Not shown which) will run the cleanup function and re-fire the setup. Its magic Thanks Jack export const pageEntryAnimationRevisit = () => { // Declare variables to store the timeline and cleanup function let entrytl; let playedAnimation = false; let firstVisit = false let ctxSplits; const playRevisitAnimation = () => { ctxSplits = gsap.context(() => { entrytl = gsap.timeline(); gsap.set('.hero_text', { transformOrigin: 'center center', }); entrytl.set(".hero_text, .hero_title", { opacity: 1 }); entrytl.splitReveal(".hero_text1", { rotation: 5 }, 0) .splitReveal(".hero_title", { rotation: 5 }, 0.2) .splitReveal(".hero_text2", { rotation: 5 }, 0.5); entrytl.play(); playedAnimation = true; firstVisit = false; }, content.value); }; const heroRevisitCleanup = () => { ctxSplits && ctxSplits.revert(); }; return { playRevisitAnimation, heroRevisitCleanup }; };

Here is also another solution to consider where we pin scenes, play a staggered set of animations, once those are complete the scene will kill. I love this because you don't need to worry about where to place the end point of your scroll trigger, or worry about how many tweens you add to the timeline, the scroll will just unpin once its timeline is complete. https://codepen.io/windpixel/pen/QWoNjPv

Thanks Jack

Ahh ok, sorry, maybe i'm reading outdated forum context. So I should be able to just wrap everything in and it should be able to revert? I'll get working on a min dem. ctx = gsap.context(() => { // All splitText stuff }, ref.value); // Later do the cleanup ctx.revert();

Hi Androlax, If your first element is pushed against the top of the viewport and you want it to "do a thing" on scroll, it will be a little bit of a race. One approach is to: 1. Create a timeline which has a single scroll trigger applied to it. 2. Use the parent Element as the trigger 3. We want to add a bunch of tweens to the timeline (which we might not know how long it is) 4. Change the "end" value to adjust the speed of the animation (lower value = faster, higher = slower. Here is the first codepen. Ill be back with another shortly using splitText because this is a good case for it IMO https://codepen.io/windpixel/pen/QWoNjPv

Just had a quick logic question about where to start storing tweens so we can revert them later when using gsap.registerEffect. I'm familiar with the cleanup process of split text objects which from reading this forum, which as of ~Nov 22 aren't supported directly in via gsap.context for cleanup, so currently we need to store them as tweens then cleanup: Eg. Cleanup = [] cleanup.forEach((obj) => obj.revert()); cleanup.length = 0; cleanup.push(split1, split2); Do I need to storing tweens in an array inside of my gsap.registerEffect code? then return those tweens into the 'child code' or can I just leave the entire gsap.registerEffect untouched (preferrered as I access this a lot) and just modify the code that calls the register effect? Eg. "splitReveal" is a registered effect, in some child code. entrytl.splitReveal(".hero_text1", { rotation: 5 }, 0) .splitReveal(".hero_title", { rotation: 5 }, 0.2) .splitReveal(".hero_text2", { rotation: 5 }, 0.5); /** Below export const gsapEffectSplitReveal = () => { // Define the splitReveal effect gsap.registerEffect({ name: "splitReveal", extendTimeline: true, defaults: { rotation: 5, stagger: 0.2, duration: 2, ease: "power4.out", }, effect: (targets, config) => { let splitLines = new SplitText(targets, { type: "lines", linesClass: "split-child-lines" }); let splitMask = new SplitText(targets, { type: "lines", linesClass: "split-child-lines-mask" }); gsap.set(splitLines.lines, { transformOrigin: "bottom 0%" // Corrected syntax here }); return gsap.from(splitLines.lines, { opacity: 0, duration: config.duration, ease: config.ease, yPercent: 100, rotation: config.rotation, stagger: config.stagger }); } }); }; export const pageEntryAnimationFirst = () => { // Declare variables to store the timeline and cleanup function entrytl = gsap.timeline(); gsap.set('.hero_text', { transformOrigin: 'center center', }); entrytl.to('.hero', { yPercent: 0, clipPath: "polygon(0 0%, 100% 0%, 100% 100%, 0% 100%)", duration: 1, rotation: 0, ease: ease2, }); entrytl.set(".hero_text, .hero_title", { opacity: 1 }); entrytl.splitReveal(".hero_text1", { rotation: 5 }, 0) .splitReveal(".hero_title", { rotation: 5 }, 0.2) .splitReveal(".hero_text2", { rotation: 5 }, 0.5); entrytl.play(); }; No minimal demo on this one sorry, just hoping for a quick point in the right direction and I can build the code myself Thanks in advance.

Hi Akash, Thanks for the minimal demo. Im having a little trouble understanding the end result of what you are trying to achieve. You want to *add* "Auto Alpha" do you mean tween from 0 - 1 so that it appears? or from 1 to 0 - so the image disappears and visibility. Also, when you sat their "respective places" what exactly is the place. Should be able to help more with a little more information. https://codepen.io/windpixel/pen/mdoeNMm

Yep. Bang on Rodrigo Thank you. Followed your advice and it worked right away. So far I have solved all the following 'problems' hopefully I can join you in the future as one of the support guys on here helping with Nuxt Nuxt3 w/ Super Smooth 0.75s GSAP Full Page Transitions - Pretty Much Instantaneous ScrollSmoother being initiated w/ effects turned on for Parallax Full Page Hero Backgrounds Scroll Triggers being setup after for various things, all context looked after so we can revert as needed. Sitewide Loading Screen followed by an entry animation A seperate entry animation for page revisits Window Resize Handling to reflow all the animations (Good for split text) A lot more to come Looking forward to sharing, but it will be another few weeks. /** transiton-composable.js **/ const animationState = reactive({ outAnimationComplete: false, }); export const useAnimationComposable2 = () => { const toggleOutAnimationComplete = (value) => { animationState.outAnimationComplete = value; }; return { animationState, toggleOutAnimationComplete, }; }; /** transitonConfig.js **/ const pageTransition = { ... onLeave: (el, done) => { ... onComplete() { toggleOutAnimationComplete(true); console.log("Out Animation is " + animationState.value); done(); }, }) /** page.vue **/ watch( () => animationState.outAnimationComplete, (newValue) => { try { if (newValue) { // Everything we dont want happen in unmount ctx && ctx.revert(); // <- Easy Cleanup! ctxH1 && ctxH1.revert(); // <- Easy Cleanup! ctxH2 && ctxH2.revert(); // <- Easy Cleanup! console.log("Special Unmount Happening"); } } catch (error) { console.error(error); } } );

Hi testerhs567, I went to take a look at your project link, but link is broken (404), if you can check your link then we can take a look at your minimal demo. - Lance

Thanks mvaneijgen and Rodrigo, Will do a hybrid of both these suggestions

Working on Nuxt3 Page Transtions and want to the scroll position to be retained on the .page-transition-leave-active element. Currently if you scroll down from the top position, navigate to a new route, the page snaps to the top position before routing. https://stackblitz.com/edit/nuxt-starter-ncqyhu?file=pages%2Findex.vue To recreate the issue in the Stackblitz Min Dem. 1.) Go to the "ScrollTrigger" Route. 2). Scroll to the bottom (Orange Section) 3.) Click on the Layers Section Route. The orange section will snap to the blue (first section on the page), then animate out. A couple of things to assist. I have added the below css to allow the entering and leaving "pages" to overlap, creating more of a seamless transition. So this may play a role. .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 have also set the pageTransition mode property to null, this allows the enter/exit pages to be in the DOM at the same time const pageTransition = { name: 'page-transiton', // mode: '', onEnter: (el, done) => { Lastly, in my project I am using scrollSmoother, but was able to recreate the issue without S.M. Although, not sure if SM could be used as a tool to fix the issue. <template> <div id="smooth-wrapper" ref="wrapper"> <div id="smooth-content" ref="content"> </div> </div> Thanks in advance

I have a solution, but its not very robust and im sure this is a common thing that has been solved many times before, so asking you guys. Throughout most sites there are dark and light sections and when a fixed header has a transparent background, I want to flip/invert or change the menu elements so they contrast. In the min demo below, I have used the "is-light" class on a section to act as a trigger for the toggle event, although in the event that the hero section (top of page) is already a light background, the menu items wont toggle until a scroll event occurs to "check". Im sure there is a more robust solution, so wanting to hear what is the best thing Thanks in advance. https://codepen.io/windpixel/pen/BabBREJ

Solved.

Thanks, yes makes sense. I have been working on some Nuxt3 page transitions and tracked this jump down to the effects=true, when I do a delayed scroll smoother initialisation. I will take this back into the there and see if this solves it Many thanks