[Add style in pseudo-class]

1 hour ago, Shaun Gorneau said:

 

Came in to point this out but saw you were responding, Zach! +1

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

[Add style in pseudo-class]

Sorry, here is my example. I wish I could close and open the menu on the button and the button would rotate 45 degrees

See the Pen ExVXOwM?editors=0010 by kmytor (@kmytor) on CodePen

[Add style in pseudo-class]

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!

[Page change transition]

23 minutes ago, Shaun Gorneau said:

Yes, as far as all the transitions go. The new page content is an AJAX call. From a workflow standpoint you would

 

On click (of something leading to a new URL ... make sure your handler does event.preventDefault() )

 

1. Tween out anything you want that's on the page currently

2. Make your AJAX call for the new content

3. Modify the current URL

4. Tween in anything you want tweened in

 

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

[Page change transition]

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

[Finish an animation men timeline]

Great, you summarized all my mess in a few lines
Thank you

If I would like to know why you used constant

[Finish an animation men timeline]

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!

See the Pen XWmgyeo by kmytor (@kmytor) on CodePen

[scrollmagic]

2 hours ago, PointC said:

I think you may be overthinking this project. You're trying to create a timeline for desktop and a separate one for mobile. I'd recommend simply creating one timeline like i did in my demo. You then add the tween values you like for the appropriate screen size. 

 

Your fork of my demo has some errors.

// tlOne and tlTwo are timelines, not functions
var newAnimation = window.innerWidth < 737 ? tlOne() : tlTwo();

 

If you do want to create separate timelines for each screen size, you can make that work with some changes to your code. This should work.

 

var tlOne = new TimelineMax();
var tlTwo = new TimelineMax();

tlOne.to(".boxTarget", 1, { opacity: ".4", scale: .1, background: "red" });
tlTwo.to(".boxTarget", 1, { opacity: ".8", scale: .8,  background: "yellow" });

var newAnimation = window.innerWidth < 737 ? tlOne : tlTwo;

 

Then in the ScrollMagic code, you use newAnimation like this:

 

  .setTween(newAnimation)

 

You don't need to call any functions to make this work so you can delete that part of your code.

 

 

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

 

[scrollmagic]

And in this my other example the achieved an important breakthrough
but I can not get the animation on mobile

 

See the Pen GzaYNN?editors=1001 by kmytor (@kmytor) on CodePen

 

I hope you manage to understand what I need to do

[scrollmagic]

12 hours ago, PointC said:

That function works just fine. Load the demo at different screen sizes and you'll set that the box changes to red on small screens and yellow on large screens. 

 

I don't know how it could be both red and yellow. If you're talking about a resize event, I mentioned that earlier. If a user resizes the screen, you may have to rebuild the timeline and ScrollMagic scene.

 

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

 

See the Pen ywNbwJ?editors=0010 by kmytor (@kmytor) on CodePen

 

[scrollmagic]

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

[scrollmagic]

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

 

See the Pen GzaYNN?editors=0011 by kmytor (@kmytor) on CodePen

 

[scrollmagic]

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.

 

See the Pen GzaYNN?editors=0010 by kmytor (@kmytor) on CodePen

 

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

}

[scrollmagic]

On 2/21/2019 at 4:55 PM, PointC said:

Hi again and I apologize, I'm looking everywhere where they can give me an answer on how to handle a condition in a timeline but not the answer can you help me?
 

See the Pen GzaYNN?editors=0010 by kmytor (@kmytor) on CodePen

 

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

[Scroll Magic animation scroll issue mobile]

 

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

 

 

 

 

[Scroll Magic animation scroll issue mobile]

 

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

 

[Scroll Magic animation scroll issue mobile]

 

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

 

 

See the Pen GzaYNN by kmytor (@kmytor) on CodePen

 

[scrollmagic]

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 

 

See the Pen GzaYNN by kmytor (@kmytor) on CodePen

[several CSS in a var]

14 hours ago, Rodrigo said:

 

Thank you very much and thanks for the advice
Gracias totales 

 

[several CSS in a var]

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

})

 

});

 

[several CSS in a var]

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!