Shutt90

Amazing, always wondered about the timelines on GSAP but never really thought to dissect them. Thank you for sending that it's a great help to see it being used in something familiar, I can finally wrap my head around it.

Not sure what's going on here, could be the onComplete because I haven't used it before. But when I'm hovering some are sticking open when I've left the element and also sometimes they glitch out completely and just get stuck without the text and are no longer interactable. I wondered if there was a check I could add see make sure the cycle completes and queues reverse or something similar? Or any other suggestions would be great

Hi Akapowl, After racking my brain for a few days I've just stuck it all in a setTimeout before triggering any of the functions and giving it 100ms because calling them in and it seems to be working fin. Not sure if the issue was with my DOMContentReady having an issue with my string split and stagger but anyways the issue is solved. Thank you for your help, I'll certainly look into lazy: false in furture too

I'm fetching data from the database but if I scroll too quickly as shown in the video the markers are stuck at the top of the page. I've wrapped it all in DOMContentLoaded, as well as went through the common mistakes and changed "top" to "0" but nothings working still. I don't think I can attach a full codepen for the issue but have attached one of my scrolltrigger calls. Delay and stagger are arguments wrapped in the outer function which I've ruled out. Video is attached below. EDIT* I've also added a loading screen and deactivated mousewheel event temporarily on page load as well as overflow hidden in a delay hoping that would fix it but still nothing const digitalBlock = document.getElementById(block) let digitalH = digitalBlock.querySelector(childElement) digitalText = digitalH.textContent const digitalSplit = Array.from(digitalText) let newText = [] digitalSplit.forEach(letter => { newText.push(`<span>${letter}</span>`) }) const joinedString = newText.join('') digitalH.innerHTML = joinedString gsap.from(digitalH.children, { scrollTrigger: { trigger: digitalBlock, start: '0% 70%', end: '50% 10%', toggleActions: 'play reverse play reverse', markers: true }, y: 200, opacity: 0, stagger: stagger, delay: delay, }) https://liampugh.co.uk/ShareX/brave_na9egQn9A7.mp4

Switched it to divs and works great, thanks again Blake

I'm bringing in the content from a CMS and want to work with dynamic data so splitting the string and returning it back to work with children (top part). Only issue is for some reason it doesn't seem to be animating with the X: -200 or any X, Y entry call. Wondered if anyone knew the reason for this?

So I'm using the same code and everything should be set up correctly but I keep getting Invalid property rotate set to 45 Missing plugin? gsap.registerPlugin() I'm importing GSAP from CDN, with CSSRule and ScrollTrigger at top of file with my custom js file on defer, I also have other gsap further down the page with rotations thats working fine with rotate. Also I had added the gsap.to(anim.... for debugging purposes so I think this could be the issue for it not working. EDIT - managed to get it working, I was trying to rotate an svg/i from font awesome and it wasn't liking it so had to target the outer div const skills = gsap.utils.toArray('.skills-container__inner'); const animations = skills.map(element => { const animation = gsap.to(element.querySelector(".skills-rotate"), { rotate: 45, reversed: true }); console.log(element.querySelector('.skills-rotate')) element.addEventListener("click", () => { animations.forEach(anim => { if (anim === animation) { gsap.to(anim, { rotate: 45, }) // toggle this animation anim.reversed(!anim.reversed()); } else { // reverse all the other animations anim.reverse(); } }); }); return animation; });

Both are excellent solutions thank you. Just having a slight issue getting it working with my full code.

I just came to say that, that's quite frankly one of the best looking sites I've ever seen tbh.

Not sure if this is considered a GSAP question tbh but I'm looking to close all other rotations in the loop when that's already open is pressed using vanilla JS. Becuause I'm in a foreach I'm not sure on the best way or if theres a special gsap way to do it. TIA

I deleted it and changed the order of the object variables and and somehow its working now. It's bizarre that it wasn't working in the first place though, a colleague had it working on his and it was the exact same

Anyone know what could be happening here? I can't see anything wrong with the formating or the CDN imports so not sure what else it could be