Lucifer765

Hi @GreenSock Thank you for your replay..... Actually my code is huge thats why im finding difficulties to give u a minimal demo. By the way u are adding gsap.to here... But i did all of my code using TweenMax.to. Now my questions are.... 1. Will there be any problem/error if i put these two together? I mean gspa.to and tweenmax.to? 2. If i want to do this using tweenmax.to, then can i do like this? //show var show_cont = TweenMax.to('#skills .screens .small-box #hide', 2.5, { delay: 2.5, opacity: 1, visibility: "visible", autoAlpha: 1 }); //hide var hide_cont = TweenMax.to('#skills .screens .small-box #hide', 2.5, { delay: 2.5, opacity: 1, visibility: "visible", autoAlpha: 0 });

Hi! Im new in gsap. I have an object in css. Initially i hide this object using display none & opacity 0 in css. Now in animation i want to show the object for a few seconds & hide it back smoothly. Now i have done the show animation using tweenmax. But the problem is, I cant hide it back smoothly... Can u give me any solutions? //CSS #skills .screens .small-box #hide { display: none; opacity: 0; visibility: hidden; } //Javascript var show_cont = TweenMax.to('#skills .screens .small-box #hide', 2.5, { delay: 2.5, display: "block", opacity: 1, visibility: "visible" });

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 }); } });

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?

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.