[App-style Modals with Draggable]

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

[App-style Modals with Draggable]

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)" });
        }
    }
});

See the Pen bGzmONy by pixelborder (@pixelborder) on CodePen

[New way of typewriter]

Legend. Thank you Steve - that fixed it.

[New way of typewriter]

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"
        })
        
});

 

[ScrollTrigger: target multiple elements with same action, but not at the same time]

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

[ScrollTrigger: target multiple elements with same action, but not at the same time]

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?

[ScrollTrigger: target multiple elements with same action, but not at the same time]

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)