PixelBorder

That's perfect thank you Rodrigo - exactly what I was looking for!

I'm trying to create app-style modals using Draggable but I've run into a problem. These will only be visible on mobile/touch devices. At the minute it allows the user to swipe away the modal if they touch and swipe anywhere on the modal - the issue is that sometimes the modal content needs to be scrollable. What I'd like to be able to do is allow the user to swipe the modal away by pressing and swiping on the red bar at the top but I can't figure out how to do it. I tried with the following code but it made the red bar and the modal both scrollable independent of each other. Any help would be greatly appreciated! Draggable.create(".compact-menu-header", { type: "y", inertia: false, onPress: function() { this.update(); // Update the Draggable instance to get the latest position. }, onDrag: function() { // Move the modal card, not the header var modalCard = document.querySelector(".modal-card"); gsap.set(modalCard, { y: this.y }); }, onDragEnd: function() { var modalCard = document.querySelector(".modal-card"); var threshold = window.innerHeight * 0.45; if (this.y > threshold) { document.querySelector(".modal-container").classList.remove("open"); gsap.set(modalCard, { y: 0 }); // Reset the position of the modal } else { gsap.to(modalCard, { y: 0, duration: 0.2, ease: "elastic.out(0.5,0.4)" }); } } });

Legend. Thank you Steve - that fixed it.

I'm trying to achieve this same thing but controlled by scrollTrigger instead. I can't seem to get it to work, any idea where I'm going wrong please? $(document).ready(function(){ //GSAP ANIMATION gsap.registerPlugin(ScrollTrigger); //typewriter gsap.to(".intro", { scrollTrigger: { trigger: ".intro", toggleActions: "play none none reverse", start: "top 0" }, text: { value: "Let's get to work" }, duration: 5, delay: 1, ease: "none" }) });

Whoops, sorry about that and thank you for the super quick response! This worked perfectly, thank you. I've not got much of a head for Javascript. I tend to think in terms of CSS when it comes to solutions so it's going to take a bit of a shift in the way I think to get the best out of this. But I'm really impressed with it so far. Thanks again

Actually might have just made a workaround to this. I've added rule of top: 100px to nth-child(even) and it has the desired effect. Would be good to know if there's a better way of doing this with gsap though?

Hi guys, If this was to be applied to a 2 column grid, as opposed to a 1 column grid like in the above example, how would you place a delay between the section on the left animating in and the section on the right animating in? I've basically got the same thing and I need the right column to animate 0.25s after the left column. I tried using stagger but this doesn't seem to be doing anything... Here's the code I'm using: var sections = gsap.utils.toArray('.gsap-block'); sections.forEach((section) => { gsap.from(section, { scrollTrigger: { trigger: section }, duration: 1, opacity: 0.5, y: 150, stagger: 0.25 }); }) and here's how the grid looks: (the blocks in each row animate in at the same time)