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.
VID_20201007_224000.mp4