maeOlives

Thank you, this is really helpful.

I successfully used ScrollTrigger and the callback onEnter to trigger a function, but I'm having trouble when trying to trigger multiple elements with the same class. Before, when just triggering an animation for multiple elements of the same class, I would use the jQuery "each" function, but unfortunately it doesn't work in this scenario. This code below works: const projectTitle = document.getElementById('bc-projects__heading'); const newerText = new functionName(projectTitle, { timeOffset: 25, callback: () => { console.log('working') } }); function starterFx() { newerText.start(); console.log('still working') } ScrollTrigger.create({ trigger: ".bc-projects__heading", onEnter: starterFx, delay: 3, }) But when using the jQuery function with ScrollTrigger onEnter, it doesn't work: const projectTitle = document.getElementById('bc-projects__heading'); const newerText = new functionName(projectTitle, { timeOffset: 25, callback: () => { console.log('working') } }); function starterFx() { newerText.start(); console.log('stillworking') } $(".bc-middle-main__heading").each(function() { ScrollTrigger.create({ trigger: $(this), onEnter: starterFx, }) }); Am I calling the API with the wrong arguments?

@Rodrigo Oh my, I was severely overcomplicating this! This is exactly what I was looking for. Thank you, you saved the day!

Thank you, this is helpful! Although, I'm still having trouble getting the animation to start once the bottom of .beginning is a the bottom of the viewport. Since I don't want the animation to start right away (and want to scroll the entire .beginning div), it seems best to trigger .overlapping. But with the grid layout, the triggering happens immediately. I'm not sure how to approprately set the pin to .beginning once the animation is triggered.

Hey everyone, Bear with me as I'm new to GSAP, but I'm trying to use ScrollTrigger (and perhaps pinning) to get the second part of my website to overlap the first part. I split the two parts of the websites into .beginning and .overlapping. More specifically, how can I get the .overlapping part of the site to overlap the .beginning part of the site starting when the top of .overlapping hits the bottom of the viewport? The idea is that .beginning stays in place (once the bottom of that div is at the bottom of the viewport) and the .overlapping rolls over the top of it. I cannot seem to wrap my head around getting this to work. Any help is greatly appreciated. Minimal Demo

incredible work!