Looking for advice on the best approach for twinning ajax with GSAP - "load more"

[limbo]

So far I've only dipped toe in. I used to use a jQuery plugin for this but want more control and to do it in vanilla JS with GSAP handling animation. It's a well trodden UI component but I'm drawing blanks looking for examples I can get some ideas from.

User clicks on read more button which loads in more contnet from an URL via AJAX, with shiny GSAP UX... Then next read more, more content, then next read more - until there's no more content to load.

 

Anyone got any pointers or examples they could help me with? Ideally how to handle the AJAX request and twin with GSAP.

[Cassie]

How to handle an AJAX request is a little out of the scope of these forums, it's a very common pattern though so there will be tons of stack overflow posts and tutorials out there. Getting that working is step one.

Then when you have that working you can think about animation - Happy to help there!

But also - that really depends on what you're trying to do animation-wise? Are you trying to fade elements in, are they hooked in to scroll?  This thread has some good pointers. if you can give us a minimal demo with the load more functionality sorted and an explanation of what sort of animation you're after we can help with more specifics!

 

 

[limbo]

Thanks Cassie. I thought that might be the case. I'll have a go and post back if I get to point where I need assistance tieing in GSAP.