josephjcox

Man I feel dumb. I've been banging my head on this and I had gotten to the point where I realized it was a render timing issue but I was trying to sneak around it by only doing my calls when triggers were hit. I tried the fromto but couldn't get it to fire right and I tried using callbacks to signal the morphs on events. A simple flag solves it all!

Yes, I get it. I've been kinda hacking away at this and thought the parent - rather than the presence of the parallel scrolltimer, was responsible for the pinning working. Now I see I was just leaning on phantoms. Thank you for your prompt support!

Okay. I thought it was responsible for my pinning actually being held, but now that I remove it I see that it wasn't. Thanks.

As you scroll down to the second morph (angry face) you'll see it resets the positions of all the elements before morphing. I can't seem to get it to: Morph from original -> Worried -> Angry Instead it insists on Original -> Worried -> Original -> Angry How do I fix this?

Actually just tried again on CodePen. With the 3.12.2 resource loaded it doesn't throw and error, but nothing runs. The below is the codepen with the 3.5.1 resource loaded. I don't know if you can change the resource and see the result. https://codepen.io/Joseph-Cox/pen/qBLmoKq

I tried to recreate on CodePen. It seems to run with the new ScrollTrigger library. On my system, everything else is at 3.12.2. <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/MotionPathPlugin.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/EasePack.min.js"></script> <!-- DrawSVGPlugin.min.js, ScrollSmoother.min.js, MorphSVGPlugin.min.js, and SplitText.min.js are Club GreenSock perks which are not available on a CDN. Download them from your GreenSock account and include them locally like this: --> <script src="/gsap/minified/DrawSVGPlugin.min.js"></script> <script src="/gsap//minified/ScrollSmoother.min.js"></script> <script src="/gsap//minified/MorphSVGPlugin.min.js"></script> <script src="/gsap//minified/SplitText.min.js"></script> But if I change scroll trigger to that version, it just dies on the very first call that involves ScrollTrigger and containerAnimation. The containerAnimation works perfectly, so long as I'm using ScrollTrigger 3.5.1. I ran the console. It 3.5.1 it reports: with 3.12.2 it reports: Happy State: <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/ScrollTrigger.min.js" integrity="sha512-wK2NuxEyN/6s53M8G7c6cRUXvkeV8Uh5duYS06pAdLq4ukc72errSIyyGQGYtzWEzvVGzGSWg8l79e0VkTJYPw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> Crash and Burn State: <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>

I just bought the Shockingly package and did a simple CDN install. My animations were working fine in the sandbox version, but when I switched over I got the below. I worked out that if I reverted to the 3.5.1 CDN version of ScrollTrigger (instead of 3.12.2) the error went away. Of course, using two different versions of modules can't be a good thing... The actual code I was running was - but every time I called gsap to or fromto it choked. gsap.fromTo(".flag_paths", { drawSVG: "0%" }, { scrollTrigger: { trigger: "#part1", start: "10% 80%", end: "40% 90%", endTrigger: "#part1", containerAnimation: flagfix, scrub: 1, markers: false, }, drawSVG: "100%" });