Jump to content
Search Community

several CSS in a var

kmytor test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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!

Link to comment
Share on other sites

Hi and welcome to the GreenSock forums.

 

I'm not entirely sure of what you're trying to do, so I'll cover as many scenarios as possible.

 

First, a timeline constructor accepts an object for specific configurations, not a list of selectors each wrapped in an array:

 

var tl = new TimelineMax({ /*configurations here*/ });

 

You can read more about them here:

 

https://greensock.com/docs/TimelineLite

https://greensock.com/docs/TimelineMax

 

And watch this video from professor @Carl:

 

 

 

Second, even though GSAP is capable of tweening any numeric property in an object, which means a GSAP instance can tween the value of a property of another GSAP instance, I believe that is not the particular result you're after with this:

 

TweenMax.from(close, 1, {
  display: 'none',
  delay: 0.5
})

 

It seems that you want to animate a group of elements from display: none, you can pass a single array with all the selectors in it, directly to the GSAP instance:

 

TweenMax.from([".intro", ".photo", ".rules"], 1, {
  display: none, delay: 0.5
});

 

Finally display is not an animatable property, what you can do is animate autoAlpha, which is a combination of opacity and visibility that can serve you well. Here is a simple example illustrating how to do it:

 

See the Pen YBRYKN by rhernando (@rhernando) on CodePen

 

Hopefully this clear things a little bit.

 

Happy Tweening!!

  • Like 3
Link to comment
Share on other sites

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

Hi,

 

Again, the timeline constructors don't work in the same way the single instance constructors, so this is not going to work:

 

var close= new TimelineMax("[.intro", ".foto", ".rules"], 1, {
  opacity: 0,
  display: "none",
});

 

If you want to animate all the elements at the same time in a timeline create the timeline and then add the individual instance to it. Remember Timelines are mere containers of single instances, nothing more:

 

var close= new TimelineMax();

close.to("[.intro", ".foto", ".rules"], 1, {
  opacity: 0,
  display: "none",
});

 

See that? the .to() method is basically creating a single animation instance inside the timeline instance.

 

If you want to play the close timeline at some point during the execution of the tlOpen timeline, there is no need to actually create a new timeline, you can add a new instance in the tlOpen timeline including all the elements:

 

var tlOpen = new TimelineMax();
 
tlOpen
  .to(".one", 0.2, {
    opacity: 0
    display: "none",
    delay: 1
  })
  // instead of creating a new timeline add a new instance here
  .to([".intro", ".foto", ".rules"], 1, {
    opacity: 0,
    display: "none",
  })
  .to(".tres", .1, {
    opacity: 0
    display: "none",
    delay: 3
  });

 

Also remember that display can't be animated so that is not going to animate, instead use autoAlpha.

 

Finally two things. First, please make an effort to go through the documentation, videos and examples in order to better understand how GSAP works. Granted it can be a little challenging at first but if you follow the resources @Carl and @GreenSock (Jack) have made, you'll find yourself mastering GSAP in a short time. Also please try to make a reduced codepen sample in order to see the issue in real-editable code. Second, even though I don't have problems reading spanish (being my native language, of course ;)) the official language in the forums is english. Of course if you find in a position where you can't explain yourself in english using spanish is understandable, but please do make the effort. Is not for just wanting everyone to speak the same language, is because maybe another user could have a similar issue at some point and having everything in the same language would make it easier for that future user.

 

Happy Tweening!!

  • Like 6
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...