animation is working correctly when browser loads, when I resize the browser, the animation does not work.
gsap.registerPlugin(ScrollTrigger);
ScrollTrigger.matchMedia({
"(min-width: 750px)": ()=>{
let timeline = gsap.timeline({
scrollTrigger:{
trigger: " #skill",
start: "top 60%",
toggleActions: "restart ",
duration: 2
}});
timeline
.from("#skill .title", {
x:"-120%",
ease:'power3',
opacity: 0
})
.from("#skill .skill", {
x:"-120%",
opacity: 0
})
.from("#skill .progress", {
x:"-100%",
ease:'power2',
stagger: 0.15,
opacity: 0
}, 1);
},
"(max-width: 749px)": ()=>{
let timeline = gsap.timeline({
scrollTrigger:{
trigger: " #skill",
start: "top 60%",
toggleActions: "restart",
duration: 2
}});
timeline
.from("#skill .title", {
x:"-100%",
ease:'power3',
stagger:0.15
})
.from("#skill .skill-bar", {
x:"-100%",
ease:'power3',
stagger:0.15
})
.from("#skill .progress", {
x:"-100%",
ease:'power3',
stagger:0.15
}, 1);
}
});
