ScrollTrigger: weird behavior when resizing

[misticvm]

Hi!. First of all. Sorry for my english.

 

ScrollTrigger works correctly but when I resize the screen the values of the style attribute are lost and the element that I am animating returns to its initial position

ScrollTrigger.saveStyles(data)

  ScrollTrigger.matchMedia({

    // Desktop
    '(min-width: 900px)': function () {
      let tl = gsap.timeline({
        scrollTrigger: {
          trigger: imageOverlayBorder,
          start: '10% 20%',
          end: 'bottom 75%',
          toggleClass: { targets: [data, imageOverlay], className: "active" },
          toggleActions: 'restart none none reverse'
        }
      })

      gsap.set([imageOverlayBorder, imageOverlay], { autoAlpha: 1 })
      gsap.set(dataColumn, { alignItems: 'flex-end' })

      tl
        .fromTo(imageOverlayBorder, { backgroundColor: 'rgba(0, 0, 0, .3)' }, { duration: .5, backgroundColor: 'rgba(0, 0, 0, 0)', ease: 'linear' }, 'overlay')
        .fromTo(imageOverlayBorder, { boxShadow: '0 0 0 0 inset #fff' }, { duration: .5, boxShadow: '0 0 0 80px inset #fff', ease: 'expo.out' }, 'overlay')
        .fromTo(imageOverlay, { x: '-100%' }, { x: '-35%', ease: 'expo.out', duration: 1 }, 'overlay')
        .fromTo(title, { color: '#fff' }, { color: '#ff570d', duration: .25 }, 'overlay')
        .fromTo(data, { left: '50%' }, { left: 'calc(50% - 100px)', ease: 'expo.out', duration: 1 }, 'overlay')
        .fromTo(meta, { autoAlpha: 0, y: 25 }, { duration: .5, autoAlpha: 1, y: 0, ease: 'expo.out', }, '-=.25')
    },

 

CSS Code:

 

@media screen and (min-width: 900px) {
        left: 50%;
        width: 50vw !important;
        transform: translate(-50%, -50%);

        .et_pb_column {

          display: flex !important;
          flex-direction: column !important;
          align-items: center;
        }
      }

 

I made a little video where this weird effect is reproduced

Cheers.

 

 

[ZachSaucier]

Hey misticvm and welcome to the GreenSock forums. Can you please create a minimal issue of the demo if you'd like our help debugging? You don't need to include the majority of your code - only enough to recreate the core issue. Usually it's best to start from the ground up. This thread provides more info on how to do so:

 

[misticvm]

Hi. Thanks for reply.

 

i made this codepen. I hope it works....

 

See the Pen YzWzvON?editors=1111 by misticvm (@misticvm) on CodePen

[akapowl]

 

Hey @misticvm - welcome.

 

I just noticed, that adding 'invalidateOnRefresh: true' to your Dektop-ScrollTrigger seems to resolve the issue and make things work, as you probably intended.

 

I am afraid, I myself can not give you a thorough explanation on that at this point - you'd probably have to wait for @ZachSaucier to jump in for that, later on.

 

But maybe this gives you something to work with in the mean time.

 

See the Pen e4d38718a27dee39cc7fd127035eb97b by akapowl (@akapowl) on CodePen

 

 

 

[ZachSaucier]

Hey @misticvm and welcome. Thanks for posting about this, it was a bug  We got it fixed in the latest beta:

See the Pen JjKjaVz?editors=0010 by GreenSock (@GreenSock) on CodePen

 

You can copy the versions linked in the pen above or use the workaround that Paul found and posted about above.

[misticvm]

Thank you very much to both!

 

It seems that everything works perfect now.