kmytor

Excellent thank you very much for the recommendations of the use I will study more, I really like how gsap is used. you are so friendly. Thank you

Sorry, here is my example. I wish I could close and open the menu on the button and the button would rotate 45 degrees https://codepen.io/kmytor/pen/ExVXOwM?editors=0010

Hi, I have this code with a pseudo-class::before and I also can't make this go the other way function animaOpen(){ gsap.timeline() .to(".nav-megamenu", {duration: 0.5, right:0,}) .from("ul#menu-mega-menu li", {right:-100, stagger: 0.1, duration:0.2, ease:"back"}, "-=1"); } btonMobile.onclick = function () { //console.log(rotate); if (".hambur-movil" !== "right: -190px") { rotate(); }else if(".hambur-movil" === "right: 0px"){ rotate.reverse(); } } &:before{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; background:url(./icon.svg) no-repeat center center; background-size: 70%; content: ""; z-index: 0; transform: scale(0.8, 0.8) rotate(45deg); } i want to know how to add this class with gsap, is there any way? otherwise I would have to change the structure of many parts of my website Help!

all i find with ajax is with Jquery i would like to do it without jquery do you have any guide? to implement it with gsap

Hello, I would like to make a page change, a transition from one section to another: Example: xxxx.com/about at xxx.com/contac is there any way to GSAP it? Gracias

Great, you summarized all my mess in a few lines Thank you If I would like to know why you used constant

I would like that by clicking alternate or quick clicks the animation of this event on the timeline will not be damaged, What I mean is if I quickly click on the buttons to change the image galleries do not get damaged Is there any way to tell it when show animation ends show hide animation? I am not very expert and I am in daily learning Thank you!

Thank you It works but you have not expected something different The solution is like a demonstration. It would be but with. I have the problem I can only change one element, as I do to be more elements, I have to make a variable (var = name) for each element. example var newColor2 = window.innerWidth <737? "0": "0.5"; tl.to (".boxTarget", 1, {opacity: newColor2}); etc, etc...

And in this my other example the achieved an important breakthrough but I can not get the animation on mobile I hope you manage to understand what I need to do

Hello I understand you I do not explain myself very well, forgive me ... I made another example with the example that you made me but I am not very expert in programming, I defend myself with the basics and I wanted to do something more advanced but when I saw that it did not fit in the mobile I was forced to try a conditional so that it fits the animations look this is my example

but this function does not change to red color it only changes when you put it like that > 737 and what I need is that it works in both yellow and red depending on the size of the screen and here is not happening

Hello again me I can not or better said nose now load the variable but with animations loaded

I am sorry if I publish it in many parts it is that I need an answer that I do not have and nobody thinks that I understand what I want to do, I'm sorry I'm going to put it another way to see if you understand me. function intro() { if (window.matchMedia('(max-width: 320px)').matches) ) { var tlintro = new TimelineMax(); console.log("load desktop"); } else { var tlintromobile = new TimelineMax(); console.log("load mobil"); }

AnimaWeb.to(".ass picture", 1, { top: "-=50%", delay: 0 }) .to(".ass picture", 5, { top: "30%", position:"fixed", filter: "blur(0px)", delay: 0 }) //how do you do this if (window.matchMedia('(max-width: 320px)').matches) { TweenMax.from(".ass picture", 5, { opacity: ".5", delay: 1 }) } else { TweenMax.from(".ass picture", 1, { opacity: "1", delay: 1 }) } .to(".ass picture", 1, { top: "90%", scale: 0.1, filter: "blur(15px)", delay: 0 }) .to(".bg", 2, { top: "+=200%", delay: -1 });

disclpa another question There is a way to make a condition within a timeline like this here:

or by God as I do not fix many thanks. but I do not understand why it was done with this action AnimaWeb.set (". ass picture", {position: 'fixed'}); ???

I have a similar problem and I do not know what can help you, and I can not make it work in codepen either Thank you

hello, again me they can help me I have two other problems I am not a programmer and I am in the apprenticeship I'm trying to make scrollmagic work in codepen.io the other thing is that I want this chain of aniamacion to run but it does not hold anything if (window.matchMedia('(max-width: 320px)').matches) { TweenMax.from(".astro1 picture", 5, { top: "0%", delay: 1 }) } Uncaught SyntaxError: Unexpected token if Gracias

Hello, thank you very much clarify many doubts and apologize not to be more clear is that we understand well what I was doing with the code this is the exercise queria hacer una sola cadena de animacion para hacer estos eventos al tiempo, delay, opacity y lo tenia estructurado de esta manera var tlOpen = new TimelineMax(); var tltwo= new TimelineMax("[.intro", ".foto", ".rules"]); tlOpen .to(".intro", 0.2, { opacity: 0 display: "none", delay: 0 }) .to(".rules", 0.3, { opacity: 0 }) .to(".rules", .1, { opacity: 0 display: "none", delay: 0 }) .to(".name", 0.5, { opacity: "0", ease: Power4.easeOut }); and what I want is this because I have many animated chains for this style and it is very long var tlOpen = new TimelineMax(); var close= new TimelineMax("[.intro", ".foto", ".rules"], 1, { opacity: 0, display: "none", }); tlOpen .to(".one", 0.2, { opacity: 0 display: "none", delay: 1 }) close("0"), //how to make it work in this part or load ? .to(".tres", .1, { opacity: 0 display: "none", delay: 3 }) });

multiple css in a variable can help me I'm not very good programming and I do not achieve this example var close = new TimelineMax([".intro"], [".photo"], [".rules"]); TweenMax.from(close, 1, { display: 'none', delay: 0.5 }) Help!