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();