Scrolltrigger Drawsvg and motionpath

[AllenIVe]

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

[mvaneijgen]

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

 

[AllenIVe]

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

[mvaneijgen]

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.

[AllenIVe]

@mvaneijgen Solved, the problem was >   alignOrigin: [0, 0]