AllenIVe Posted September 25, 2023 Share Posted September 25, 2023 Hi guys, I'm trying to solve this animation, I started from this pen See the Pen OJMRYbd by delwinh (@delwinh) on CodePen and I'm integrating with my svg and a pinned section. At the moment the content is not pinned in the center, furthermore the draw and activation of the bullet points is not synchronous. See the Pen YzdaQdJ by IveSix (@IveSix) on CodePen Link to comment Share on other sites More sharing options...
mvaneijgen Posted September 25, 2023 Share Posted September 25, 2023 Hi @AllenIVe If you want it centred you'll have to find a center point and have that be the start trigger, this is best done with markers: true, so you can see what is happening. See the Pen GRPxMdM?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen For the bullets not being synced. My advies would be remove ScrollTrigger! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in. This way you can focus on one part at a time and it will save a lot of headache when debugging. Enable GSdevtools and start tweaking the animation. For ScrollTrigger the duration doesn't really matter, so I would increase your tween animation time, so that it's easier to view. Sorry I don't have time to debug your whole animation at the moment, but hopefully this points you in the right direction. Small little tip instead of hard coding the position parameter you can also use relative values, check the link. Hope it helps and happy tweening! See the Pen ZEVxXqg?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen 2 Link to comment Share on other sites More sharing options...
AllenIVe Posted October 2, 2023 Author Share Posted October 2, 2023 thanks @mvaneijgen for the advice, now I managed to get it working well. I have another problem, the svg has a transform matrix by default <circle class="ball ball00" cx="13.5" cy="13.5" r="11.5" transform="matrix(-1 0 0 1 852 125)" fill="#F5F5F0" stroke="#C8C3B9" stroke-width="4"/> <circle class="ball ball01" cx="13.5" cy="13.5" r="11.5" transform="matrix(-1 0 0 1 852 125)" fill="#F5F5F0" stroke="#C8C3B9" stroke-width="4"/> <circle class="ball ball02" cx="13.5" cy="13.5" r="11.5" transform="matrix(-1 0 0 1 964 195)" fill="#F5F5F0" stroke="#C8C3B9" stroke-width="4"/> <circle class="ball ball03" cx="13.5" cy="13.5" r="11.5" transform="matrix(-1 0 0 1 1052 300)" fill="#F5F5F0" stroke="#C8C3B9" stroke-width="4"/> <circle class="ball ball04" cx="13.5" cy="13.5" r="11.5" transform="matrix(-1 0 0 1 1098 422)" fill="#F5F5F0" stroke="#C8C3B9" stroke-width="4"/> <circle class="ball ball05" cx="13.5" cy="13.5" r="11.5" transform="matrix(-1 0 0 1 1098 566)" fill="#F5F5F0" stroke="#C8C3B9" stroke-width="4"/> <circle class="ball ball06" cx="13.5" cy="13.5" r="11.5" transform="matrix(-1 0 0 1 1052 692)" fill="#F5F5F0" stroke="#C8C3B9" stroke-width="4"/> <circle class="ball ball07" cx="13.5" cy="13.5" r="11.5" transform="matrix(-1 0 0 1 964 798)" fill="#F5F5F0" stroke="#C8C3B9" stroke-width="4"/> <circle class="ball ball08" cx="13.5" cy="13.5" r="11.5" transform="matrix(-1 0 0 1 852 868)" fill="#F5F5F0" stroke="#C8C3B9" stroke-width="4"/> When the page renders these are different <circle class="ball ball00" cx="13.5" cy="13.5" r="11.5" transform="matrix(-1,0,0,1,5.5,322.314)" fill="#F5F5F0" stroke="#C8C3B9" stroke-width="4" style="opacity: 1; visibility: inherit; translate: none; rotate: none; scale: none; transform-origin: 0px 0px;" data-svg-origin="2 2"></circle> <circle class="ball ball01" cx="13.5" cy="13.5" r="11.5" transform="matrix(-1,0,0,1,806,125)" fill="#F5F5F0" stroke="#C8C3B9" stroke-width="4" style="transform-origin: 0px 0px; translate: none; rotate: none; scale: none; opacity: 0;" data-svg-origin="13.5 13.5"></circle> <circle class="ball ball02" cx="13.5" cy="13.5" r="11.5" transform="matrix(-1,0,0,1,918,195)" fill="#F5F5F0" stroke="#C8C3B9" stroke-width="4" style="transform-origin: 0px 0px; translate: none; rotate: none; scale: none; opacity: 0;" data-svg-origin="13.5 13.5"></circle> <circle class="ball ball03" cx="13.5" cy="13.5" r="11.5" transform="matrix(-1,0,0,1,1006,300)" fill="#F5F5F0" stroke="#C8C3B9" stroke-width="4" style="transform-origin: 0px 0px; translate: none; rotate: none; scale: none; opacity: 0;" data-svg-origin="13.5 13.5"></circle> <circle class="ball ball04" cx="13.5" cy="13.5" r="11.5" transform="matrix(-1,0,0,1,1052,422)" fill="#F5F5F0" stroke="#C8C3B9" stroke-width="4" style="transform-origin: 0px 0px; translate: none; rotate: none; scale: none; opacity: 0;" data-svg-origin="13.5 13.5"></circle> <circle class="ball ball05" cx="13.5" cy="13.5" r="11.5" transform="matrix(-1,0,0,1,1052,566)" fill="#F5F5F0" stroke="#C8C3B9" stroke-width="4" style="transform-origin: 0px 0px; translate: none; rotate: none; scale: none; opacity: 0;" data-svg-origin="13.5 13.5"></circle> <circle class="ball ball06" cx="13.5" cy="13.5" r="11.5" transform="matrix(-1,0,0,1,1006,692)" fill="#F5F5F0" stroke="#C8C3B9" stroke-width="4" style="transform-origin: 0px 0px; translate: none; rotate: none; scale: none; opacity: 0;" data-svg-origin="13.5 13.5"></circle> <circle class="ball ball07" cx="13.5" cy="13.5" r="11.5" transform="matrix(-1,0,0,1,918,798)" fill="#F5F5F0" stroke="#C8C3B9" stroke-width="4" style="transform-origin: 0px 0px; translate: none; rotate: none; scale: none; opacity: 0;" data-svg-origin="13.5 13.5"></circle> <circle class="ball ball08" cx="13.5" cy="13.5" r="11.5" transform="matrix(-1,0,0,1,806,868)" fill="#F5F5F0" stroke="#C8C3B9" stroke-width="4" style="transform-origin: 0px 0px; translate: none; rotate: none; scale: none; opacity: 0;" data-svg-origin="13.5 13.5"></circle> my code doesn't act on that specification, what could it be? gsap.defaults({ ease: "none" }); ScrollTrigger.defaults({ // markers: true }); // gsap.set(".ball", { xPercent:0, yPercent: 0 }); var tl = gsap .timeline({ defaults: { duration: 0.3, // autoAlpha: 1, transformOrigin: "center", ease: "elastic(2.5, 1)" } }) .from(".ball01, .text01", { opacity: 0 }, 0.31) .from(".ball02, .text02", { opacity: 0 }, 0.37) .from(".ball03, .text03", { opacity: 0 }, 0.42) .from(".ball04, .text04", { opacity: 0 }, 0.47) .from(".ball05, .text05", { opacity: 0 }, 0.53) .from(".ball06, .text06", { opacity: 0 }, 0.56) .from(".ball07, .text07", { opacity: 0 }, 0.61) .from(".ball08, .text08", { opacity: 0 }, 0.63); var action = gsap .timeline({ defaults: { duration: 1 }, scrollTrigger: { trigger: ".wrapper svg", scroller: ".scroll__stage", scrub: true, start: "center center", end: "center top", preventOverlaps: true, anticipatePin: 1, pin: ".wrapper " } }) .to(".ball00", { duration: 1, autoAlpha: 1 }) .from(".theLine", { drawSVG: 0 }, 0) .to( ".ball00", { motionPath: { path: ".theLine", alignOrigin: [0, 0] } }, 0 ) .add(tl, 0); Thanks Link to comment Share on other sites More sharing options...
mvaneijgen Posted October 2, 2023 Share Posted October 2, 2023 That is something your design program inserts. I would look for an option called "flatten transforms" when exporting your SVG, I know this is an option in Affinity Designer. Link to comment Share on other sites More sharing options...
Solution AllenIVe Posted October 2, 2023 Author Solution Share Posted October 2, 2023 @mvaneijgen Solved, the problem was > alignOrigin: [0, 0] 1 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now