Scroll Trigger gets jumpy when i animate rotation of svg

[mateuszjanbilko]

Hallo!

im geting problem when i animate on scroll rotation of the svg(problems are only on live site - locally everzthing works perfect), when i coment out the rotation code scrollTrigger works as desired - but with no roration:)

 

Here is my mounted so that you can see what im i faceing here:)

mounted() {
    gsap.registerPlugin(ScrollTrigger)
    gsap.from(this.$refs['textGirlAnim'].children, {
      autoAlpha: 0,
      x: -140,
      stagger: 0.3,
      duration: 1.5,
      scrollTrigger: {
        trigger: this.$refs['girl-section'],
        start: 'top bottom-=200',
        toggleActions: 'restart pause resume pause',
      },
    })
    gsap.from(this.$refs['image-section'].children, {
      autoAlpha: 0,
      x: -140,
      stagger: 0.3,
      duration: 1.5,
      scrollTrigger: {
        trigger: this.$refs['image-section'],
        start: 'top bottom-=200',
        toggleActions: 'restart pause resume pause',
      },
    })
    gsap.set('.cardWrapper', { perspective: 800 })
    gsap.set('.card', { transformStyle: 'preserve-3d' })
    gsap.set('.back', { rotationY: -180, opacity: 1 })
    gsap.set(['.back', '.front'], { backfaceVisibility: 'hidden' })
    ScrollTrigger.matchMedia({
      // desktop
      '(min-width: 601px)': () => {
        let tl = gsap.timeline({
          scrollTrigger: {
            trigger: this.$refs['blackanim'],
            start: 'center center',
            end: '+=500px',
            pin: true,
            pinSpacing: true,
          },
        })
        tl.from(
          this.$refs.plate,
          {
            css: {
              autoAlpha: 0,
              rotationY: -26,
              rotationX: 72,
              rotationZ: 5,
            },
          },
          2,
        ).to(
          this.$refs.gelb,
          {
            transformOrigin: 'center',
            scale: 1,
            xPercent: -30,
          },
          1,
        )
      },
      // small screen
      '(max-width: 600px)': () => {
        let tl = gsap.timeline({
          scrollTrigger: {
            trigger: this.$refs.blackanim,
            start: 'center center',
            scrub: true,
            pin: true,
            pinSpacing: true,
          },
        })
        gsap.set(this.$refs.plate, {
          xPercent: -35,
          scale: 0.6,
          autoAlpha: 0,
          css: {
            rotationY: -26,
            rotationX: 72,
            rotationZ: 5,
          },
        })
        gsap.set(this.$refs.imageblackpone, {
          width: '300%',
          xPercent: -5,
        })
        // tl.from(this.$refs.plate, {
        //   css: {
        //     xPercent: -110,
        //     autoAlpha: 0,
        //     rotationY: -26,
        //     rotationX: 72,
        //     rotationZ: 5,
        //   },
        // })
        tl.to(this.$refs.gelb, {
          scale: 1.2,
          xPercent: -70,
          yPercent: 15,
        })
        tl.from(this.$refs['imageblackpone'], {
          width: '300%',
          xPercent: -45,
        })
        // tl.from(
        //   this.$refs['clsall'],
        //   {
        //     transformOrigin: 'center center',
        //     opacity: 0,
        //     scaleX: 0,
        //     scaleY: 0,
        //   },
        //   2.5,
        // )
        // tl.from(this.$refs['clsall'], {
        //   transformOrigin: 'center center',
        //   autoAlpha: 0,
        //   scaleX: 0,
        //   scaleY: 0,
        // })
      },
    })
    if (process.client) {
      let width = window.innerWidth
      if (width < 600) {
        this.mobile = true
      } else {
        this.mobile = false
      }
    }

    ///Scroll black begin
  },

 Does anyone of you had problem with it too?

 

I also not sure if its correct syntax to define css properties inside of a timeline like this, and i couldnt find anything in the docks.

tl.from(

this.$refs.plate,

{

css: {

autoAlpha: 0,

rotationY: -26,

rotationX: 72,

rotationZ: 5,

},

},

2,

)

 

If anyone can give me a little hint, id be grateful:)

 

peace!

 

[_Greg _]

Hi and wellcome.

This is not css properties

autoAlpha - will be converted to opacity and visibility, rotationX will be converted to transform: rotateX.. check 2D and 3d transforms

 

So you need just write like:

tl.from(this.$refs.plate, {
  autoAlpha: 0,
  rotationY: -26,
  rotationX: 72,
  rotationZ: 5,
},2)

What do mean to specify 2 for this.$refs.plate, this is something like delay? What do you expect?

 

UPD: SVG doesn't allow 3D transforms, please check this topic

[mateuszjanbilko]

Hi Greg!

yes, it was meant to be delay... i was hoping that specifying it in "time" helps.

Thanks alot for your answer! now i try with skewY, and locally it works.

ill let you know and paste some snippet for others in case it works.

[mateuszjanbilko]

e sqewY works, actually with the rotationZ it was working too... but the background image itself gets some padding in the beginning and jumps... while desktop works just fine...

 <!-- black anim phone -->
    <div
      ref="blackanim"
      class="m-0 p-0 bg-yellow-100 overflow-hidden align-end flex relative h-screen w-full"
    >
      <div
        ref="imageblackpone"
        class="fixed m-0 p-0 w-full h-full bg-blackanim bg-cover"
      >
        <div
          ref="gelb"
          class="inset-y-0 w-1/2 right-0 text-4xl flex flex-col absolute top-0 justify-center md:text-2xl"
        >
          <div class="z-2">
            <h4 class="text-xl md:text-4xl" style="color: #f7c705;">
              {{ $t('working_class') }}
            </h4>
            <p class="text-white text-xl">
              {{ $t('upto') }}
              <br />
              {{ $t('kg') }}
            </p>
          </div>
          <svg
            ref="plate"
            xmlns="http://www.w3.org/2000/svg"
            xmlns:xlink="http://www.w3.org/1999/xlink"
            viewBox="0 0 325.92 234.96"
          >
            <defs>
              <style>
                .cls-1,
                .cls-3,
                .cls-2,
                .cls-5 {
                  fill: none;
                }
                .cls-1,
                .cls-3 {
                  stroke: #6ec6d9;
                }
                .cls-4 {
                  fill: #1d1d1b;
                }
                .cls-4,
                .cls-5 {
                  font-size: 27.47px;
                }
                .cls-5 {
                  stroke: #f7c701;
                }
              </style>
            </defs>
            <g id="Ebene_2" data-name="Ebene 2">
              <g id="Ebene_1-2" data-name="Ebene 1">
                <path
                  class="cls-1"
                  d="M287.6,37.24h-221L37.42,66.4l-.3-.3V171.88L63,197.76H287.6a1.27,1.27,0,0,0,1.28-1.27v-158A1.27,1.27,0,0,0,287.6,37.24Z"
                />
                <g ref="clsall" id="Ebene_3" data-name="Ebene 3">
                  <line
                    ref="cls3"
                    class="cls-3"
                    x1="273.96"
                    y1="146.53"
                    x2="82.18"
                    y2="146.53"
                  />

                  <line
                    ref="cls3"
                    class="cls-2"
                    x1="273.96"
                    y1="146.53"
                    x2="82.18"
                    y2="146.53"
                  />
                  <line
                    ref="cls2"
                    class="cls-2"
                    x1="113.64"
                    y1="61.96"
                    x2="113.64"
                    y2="173.87"
                  />

                  <line
                    ref="cls2"
                    class="cls-3"
                    x1="113.64"
                    y1="61.96"
                    x2="113.64"
                    y2="173.87"
                  />
                </g>
                <g id="Ebene_4" data-name="Ebene 4">
                  <text
                    ref="cls5"
                    class="cls-5"
                    transform="translate(143.55 114.34) scale(0.88 1)"
                  >
                    120 x 80
                  </text>
                </g>
              </g>
            </g>
          </svg>
        </div>
      </div>
    </div>
    <!-- black anim end -->
    <div class="relative">
      <div
        class="relative transform origin-bottom-left -skew-y-3 bg-black p-5 text-white text-left z-10"
        ref="brake"
      >
        <h2 class="text-xl md:text-4xl">{{ $t('seewhat') }}</h2>
      </div>
    </div>

do you think ist because, its a backgroundimage?

[GreenSock]

If you need some help, please make sure you provide a minimal demo, like in CodePen or CodeSandbox. 

 

A few quick comments: 

1. You do NOT need to wrap things in a css: {} object unless you're specifically trying to distinguish between CSS and non-CSS properties that may have the same name. It's definitely a mistake to do it the way you had it with some properties in the css:{} object, and some outside. That's basically telling GSAP that it should treat those ones outside the css:{} object as if they are totally unrelated to anything CSS (which isn't true in this case).
2. As mentioned earlier, the SVG spec doesn't allow for 3D transforms. 
3. You may want to look into ScrolllTrigger.saveStyles() especially since you're using .from() tweens that'll get rewound on resize.