Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Lucifer765

I want to change the animations using matchMedia ScrollTrigger

Recommended Posts

HI Guys,

 

I have created 2 boxes(large & small).. And i want to animate those boxes differently in different screen sizes. Here in code pen u can see a demo. Its for the large screen device. Here the small box is showing after the first box appears & then sliding to left. But i want to change the animation for medium or small screens. Like first the large box will appear like it do for large screens and then the small box will appear after a few seconds & then instead of sliding left it will disappear after showing a few seconds.

 

I used matchMedia for making changes. But somehow im unable to get the result i want. Im so confused. I dont know what to do. Can anyone tell me whats the problem in my code.

See the Pen PomZwGJ by Tech2etc (@Tech2etc) on CodePen

Link to comment
Share on other sites

Without having worked through all you code and not even fully understanding what it is you want to achieve on small screens I'd like to share my way of (sometimes) tackling similar situations;

 

If possible i work wit gasp.from tweens. The advantage ist, that i define the target position in css (with media-queries) anyway I want. The animation from the outside or from small happens than always to the given position the css. No need for queries and conditions in the js code that way. 

 

It ist surely possible and sometimes necessary to work with matchMedia in srollTrigger, but if complexity can be avoided I try to.

Link to comment
Share on other sites

Hey @iDad5 Thanks for your reply.

1. I tried to do this sliding in css using positioning. I have given position 0% to the small-box property in css. And in js, i gave the left value 70%. So that it can slide from 0-70%. But for small screen, in js i want to decrease the left value like 10-15%. I dont know how i will do that..

 

2. Also In css media queries, i tried to changing the left value(by decreasing, so that it can take less sliding). But in js it still follows the left value given for large screen(left:70%).

what should i do? 

Link to comment
Share on other sites

I'm not sure what you're trying to achieve as you have a lot of code in there. Can you make a minimal demo? Should just be one or two animations at most, with basically no styling. 

 

If you're using matchMedia, you should probably create all your animations inside of it. And there's also a saveStyles() method if you need to record any inline styles before.

  • Like 1
Link to comment
Share on other sites

Thanks for ur reply @OSUblake

I understand. Can u please tell me if my js code is correct or not? or am i following the correct method? 

gsap.registerPlugin(ScrollTrigger);

ScrollTrigger.matchMedia({
	//Large
    "(min-width: 800)": function() {
      //Here, in css the property is hidden and translateY:30px
        gsap.to(".skill_bg", {
            scrollTrigger: {
                trigger: "#skills",
                start: "10px 40%",
            },
            y: 0,
            opacity: 1,
            duration: 1
        });
      
      //Here in css, the property is display:block... And im hiding it in this media query
        gsap.to("#blur", {
            scrollTrigger: {
                trigger: "#skills",
                start: "10px 40%",
            },
            display: "none",
            duration: 2
        });
		
      //Here in css, the property is top:-20%
        gsap.to(".small-box", {
            scrollTrigger: {
                trigger: "#skills",
                start: "10px 40%",
            },
            top: "-10%",
            display: "initial",
            width: "270px",
            height: "350px",
            duration: 1
        });

		//Here in css, the property is hidden and opacity:0
        gsap.to("#hide", {
            scrollTrigger: {
                trigger: ".small-box",
                start: "10px 40%",
            },
            display: "block",
            opacity: 1,
            delay: 1,
            duration: 2
        });

		//Here in css, the property is left:10% and in this media query im sliding it to left 70%
        gsap.to(".small-box", {
            scrollTrigger: {
                trigger: ".small-box",
                start: "10px 40%",
            },
            left: "70%",
            delay: 1,
            duration: 1
        });
	
      	//Here in css, the property width is 0% and im increasing the width about 75% in this media query.
        gsap.to(CSSRulePlugin.getRule("#timeline::before"), {
            scrollTrigger: {
                trigger: "#timeline-wrap",
                start: "40px 120%",
            },
            width: "75%",
            opacity: 1,
            duration: 2

        });

		//Here in css, the property is x:-30px...and i have 4 elements in this div. 
        gsap.to(".marker", {
            scrollTrigger: {
                trigger: "#timeline-wrap",
                start: "40px 120%",
            },
            x: 0,
            opacity: 1,
            duration: 1.2,
            stagger: 0.30
        });

    },

    //medium
    "(max-width: 799px) and (min-width: 524)": function() {
      
      //I dont want to change the animation i have in large screen. Thats why i wrote the same code here again.
        gsap.to(".skill_bg", {
            scrollTrigger: {
                trigger: "#skills",
                start: "10px 40%",
            },
            y: 0,
            opacity: 1,
            duration: 1
        });

		//I dont want to change the animation i have in large screen. Thats why i wrote the same code here again.
        gsap.to("#blur", {
            scrollTrigger: {
                trigger: "#skills",
                start: "10px 40%",
            },
            display: "none",
            duration: 2
        });
		
      //I dont want to change the animation i have in large screen. Thats why i wrote the same code here again.
        gsap.to(".small-box", {
            scrollTrigger: {
                trigger: "#skills",
                start: "10px 40%",
            },
            top: "-10%",
            display: "initial",
            width: "270px",
            height: "350px",
            duration: 1
        });

		//I dont want to change the animation i have in large screen. Thats why i wrote the same code here again.
        gsap.to("#hide", {
            scrollTrigger: {
                trigger: ".small-box",
                start: "10px 40%",
            },
            display: "block",
            opacity: 1,
            delay: 1,
            duration: 2
        });

		//In css, the property is left:0%. I wanted to show that property as an slider in large screen and the value was left:75%. But now in medium screen, i want to decrease the sliding, like left:20%. And this is not working.
        gsap.to(".small-box", {
            scrollTrigger: {
                trigger: ".small-box",
                start: "10px 40%",
            },
            left: "20%",
            delay: 1,
            duration: 1
        });
      
		//Here, in css the property is x:-30px...and i have 4 elements in this div. The stagger was 0.30 in large screen. Now for medium screen i want to decrese it, like 0.15. But its not working
        gsap.to(".marker", {
            scrollTrigger: {
                trigger: "#timeline-wrap",
                start: "40px 120%",
            },
            x: 0,
            opacity: 1,
            duration: 1,
            stagger: 0.15
        });
    }

});

 

Link to comment
Share on other sites

It looks like it. Does it work for you? It's hard to tell what code does without seeing it run.

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.
×