roxzu

Nice , thanks for you help i will try that 😘

Yes certainly , here is my demo https://codepen.io/Roxzu-__/pen/dyajLOa

Hello , Im trying to do a animtion on scroll . What I want to do is a dot that starts at the bottom of the pink path and as you scroll the dot it goes up and when it is at the intersection it changes path to purple. I can't share my exact code but this is what I did overall.But the point doesn't go the other path and when i try whitout the tl.to(target) but gsap.to(target) that works witout the scrolltrigger. I don't know if I was clear but i hope someone can help me let tl = gsap.timeline({ scrollTrigger: { trigger: ".test", pin: ".test", start: "top center", end: "+3000 center", scrub: true, }, }) tl.to('.test-dot-1', { ...this.makeMotionPath(.43, .57,tl), duration: 1000, }); makeMotionPath(start, end,tl) { return { motionPath: { path: '#path-3', align: '#path-3', start: start, end: end, alignOrigin: [0.5, .5], }, onUpdate: function () { let progress = start + this.ratio * (end - start) let target = this.targets()[0]; if (progress >= 0.47) { console.log('tl',tl) console.log(target) tl.to(target, { motionPath: { path: '#path-2', align: '#path-2', start: .47, end: 1, alignOrigin: [0.5, .5], }, duration: 100, onUpdate: function (){ console.log('test') }, }); } }, } },