jsd219

Thank you OSUblake, That worked!!! I really appreciate all the help.

Hi Osublake, I think I did it correct but it still does not fix the issue. https://codepen.io/jsd219/pen/wvrdrgW

So sorry, I forgot to swap out the text. It is now lorem ipsum

ok I was able to create a codepen with the issue. I have edited the original question and added in the code pen.

I am running several animations on the page. Once the user scrolls through the animatedImages the remaining paragraphs and dividers animation's start and end markers get messed up. See screen shot for the messed up markers. Below is my code: const animatedImages = gsap.utils.toArray('.animated-photo-section') animatedImages.forEach((ai, i) => { let h = gsap.getProperty(ai, 'height', 'px') var scrollHeight = h + h / 2 gsap.to(ai, { scrollTrigger: { trigger: ai, pin: '#et-main-area', // pinSpacing: false, start: 'top 100', end: '+='+scrollHeight, scrub: 1, // toggleActions: "restart none none pause", // markers: true, onUpdate: (self) => { // console.log("update", index, self.progress.toFixed(3)) $(ai).find('.animated-photo-image-outline').css({ opacity: 1- self.progress.toFixed(3) }) $(ai).find('.animated-photo-image-full').css({ opacity: self.progress.toFixed(3) }) }, } }) }) // header animation gsap.from(".post-header-content div", {duration: 1, delay: 0.5, scale: 0, opacity: 0, stagger: 0.2}) // paragraphs animation const paragraphs = gsap.utils.toArray('.standard-copy p') gsap.set(paragraphs, {autoAlpha: 0, y: 50}) paragraphs.forEach((paragraph, i) => { // Set up your animation const anim = gsap.to(paragraph, {duration: 1, autoAlpha: 1, y: 0, paused: true}) // Use callbacks to control the state of the animation ScrollTrigger.create({ trigger: paragraph, end: "bottom bottom", once: true, // markers: true, // toggleActions: "restart pause reverse pause", onEnter: self => { // If it's scrolled past, set the state // If it's scrolled to, play it self.progress === 1 ? anim.progress(1) : anim.play() } }) }) const dividers = gsap.utils.toArray('.section-divider-icon') // gsap.set(dividers, {autoAlpha: 0, y: 50}) dividers.forEach((divider, i) => { // Set up your animation const zoom = gsap.from(divider, {duration: 1, autoAlpha: 0, scale:0.03, rotation:360, ease:Power1.easeInOut, paused: true}) // Use callbacks to control the state of the animation ScrollTrigger.create({ trigger: divider, start: "bottom bottom", once: true, // markers: true, // toggleActions: "restart pause reverse pause", onEnter: self => { // If it's scrolled past, set the state // If it's scrolled to, play it self.progress === 1 ? zoom.progress(1) : zoom.play() } }) }) // logo animation gsap.set('.sf', {fill: "rgba(255,255,255,.15)"}) gsap.to('.sf', { fill: "#fff", duration: 3, delay: 2, })