thomasJack

Im just wondering if any one has any pointers in recreating the diagonal movement of this photo wall div. Im assuming it skews it, but not sure.

this is awesome, any did any one figure out how to make the toolbar bkg expand with it?

awesome, thank you so so so much!!!!

I guess i should mention that the morph works, i just cant set the anchor points and have it do the morph rotationaly

Invalid property type set to rotational Missing plugin? gsap.registerPlugin() tl.to(waveAC, {morphSVG:waveA, type:"rotational", origin:"20% 0%", delay:0},"<")

does any one on the forum have any advice on morphing multiple paths at the same time?

Hello, is there a way to have multiple morphs happen at the same time?

https://codepen.io/Paul-TG/pen/YzOpmOm

I got super excited with your solution, but it was short lived as it didn't work, I commented out the function using it and left may solution, however I think I just have to stick to initial fill as it my solution takes away the beauty of morphSVG

Should mention, doing so directly in animation is kinky, it makes the whole svg disappear and then reaper, it doesn't look right

unfortunately, only the commented out version works as intended, and that's because onComplete() runs regardless of animation being completed, and onComplete runs as intended, so that's unfortunate!!!!! I can't pass any parameters, unless someone on the forum has any suggestions. function addGradient(gradient){ let gradientFill = gradient; let morphDot = document.getElementById("morphD1") morphDot.style.fill = gradientFill; } // function addGradient(){ // let gradientFill = "url(#linear-gradientGreen)"; // let morphDot = document.getElementById("morphD1") // morphDot.style.fill = gradientFill; // }

never mind, I set the property after animation and it looks fine!!! thank you!!!

Hi GSAP Helper, well it would be nice to do something like this: .to(morphDot, {morphSVG:dotPath, fill:var(--myGradient)}, "+=1") or alt .to(morphDot, {morphSVG:dotPath, linear-gradient(to bottom right, red, yellow)}, "+=1")

Sorry to bother, is there a way to use css in morphSVG aside from fill? for example a gradient linear-gradient(to bottom right, red, yellow)? Or alternatively to revert back to the svg with an @url? Thank you to any one in advance!

It all worked, thank you very much everyone. Tutorial videos should have those points though of including that in script, would have saved me much time but still appreciated

here is my js function changeBKG(){ const animBKG = gsap.timeline({defaults:{duration:2}}) const newBkg = document.getElementById('background'); const logoO = document.getElementById('oOutline'); const logoU = document.getElementById('dataDotsU'); const logoR = document.getElementById('DotsLogoR'); const logoDotBullets = document.getElementsByClassName('logoGradientTextCont'); animBKG.fromTo(newBkg, {y:-3000, opcaity:0}, {y:0, opacity: 1}); animBKG.fromTo(logoO, {drawSVG:"100%"}, {duration: 10, drawSVG:"50% 50%"}); // animeLogo.from(logoO, 1, {drawSVG:"50% 50%", delay:0.5, ease:Bounce.easeOut}); // animBKG.fromTo(logoU, {y:-2000, opcaity:0}, {y:0, opacity: 1, duration: 1}); // animBKG.fromTo(logoR, {scale:0, opcaity:0, transformOrigin:"50% 50%"}, {scale:1, opacity: 1, rotation:"+=360", duration: 1}); // gsap.to(logoDotBullets, { // duration: 1, // scale: 0.1, // y: 40, // ease: "power1.inOut", // stagger: { // grid: [7,15], // from: "end", // axis: "y", // ease: "power3.inOut", // amount: 1.5 // } // }); // const tl = new TimelineMax({onStart: console.log('play'), onComplete: animateLogo()}); } changeBKG(); function animateText(){ const dataDotsText = new SplitType('DotsHeader') gsap.to('.char'),{ y:0, stagger: 0.05, delay: 0.2, duration: .1 } }

Well thank you Jack, here are the error logs in console GSAP target #bar2 not found. https://greensock.com gsap.min.js:10:933 GSAP target not found. https://greensock.com gsap.min.js:10:933 GSAP target #logo not found. https://greensock.com gsap.min.js:10:933 GSAP target not found. https://greensock.com gsap.min.js:10:933 GSAP target #bar not found. https://greensock.com gsap.min.js:10:933 GSAP target not found. https://greensock.com gsap.min.js:10:933 Invalid property opcaity set to 0 Missing plugin? gsap.registerPlugin() gsap.min.js:10:821 Invalid property drawSVG set to 100% Missing plugin? gsap.registerPlugin() gsap.min.js:10:821 GSAP target not found. https://greensock.com 3 gsap.min.js:10:933 Invalid property opcaity set to 0 Missing plugin? gsap.registerPlugin() gsap.min.js:10:821 Source map error: Error: NetworkError when attempting to fetch resource. Resource URL: moz-extension://b71d79c4-9709-4610-9fc5-29a4a2ede51b/model/static/DOMPurify/purify.min.js Source Map URL: purify.min.js.map Invalid property drawSVG set to 100% Missing plugin? gsap.registerPlugin() gsap.min.js:10:821 Invalid property drawSVG set to 50% 50% Missing plugin? gsap.registerPlugin() gsap.min.js:10:821

okay i was able to install just as stated on video, im still getting the error message of plugin missing, and all it did was install one package paultennant@pauls-MacBook-Pro ~ % vim ~/.npmrc paultennant@pauls-MacBook-Pro ~ % npm install gsap@npm:@gsap/shockingly added 1 package in 6s paultennant@pauls-MacBook-Pro ~ % cd /applications/xampp/htdocs/datadots/ paultennant@pauls-MacBook-Pro datadots % npm install gsap@npm:@gsap/shockingly changed 1 package, and audited 2 packages in 2s found 0 vulnerabilities paultennant@pauls-MacBook-Pro datadots %

ill call the bank thank you for taking three minutes explaining your install, with all 4 videos, i suppose you took 12 minutes in 5 years time, great

Actually, i want my money back, or ill call bank because your instructional videos are insane, you take 3 minutes explaining something, in a way that only people that are super familiar would understand. i have node js installed, but how i find ~/.npmrc is explained so terribly that i want my money back. you've made me waste hours because you cant take the time to explain something properly.

I did the install in order to include as script tag as shown on video, although the video is awful, maybe try something like linda.com used to do. I cant even see the whole screen in order to see exactly what hes doing. what am I doing wrong? Please help. <script src="js/DrawSVGPlugin.min.js"></script> <script src="js/gsap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/TextPlugin.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js" integrity="sha512-f8mwTB+Bs8a5c46DEm7HQLcJuHMBaH/UFlcgyetMqqkvTcYg4g5VXsYR71b3qC82lZytjNYvBj2pf0VekA9/FQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <script src="js/indexAnimate.js" async></script>