Jump to content
Search Community

problem using matchmedia

AAP test
Moderator Tag

Recommended Posts

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);
        
        
    }
 
});
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...