Jump to content
Search Community

Stagger from not working specifically in my project

m4rsibar 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

I've made a simple pen in codepen with just a navbar, ul, and li and staggerfrom works as expected, but when i try to use it in my project i cannot get it to work at all?  I am able to get the desired effect if i use stagger from, and directly after stagger to on the same element but i'm under the impression that you don't have to do that and stagger from is sufficient. 

 

i've connected a codepen with my project and a big comment section in the javascript of the lines of code that arent working for me, thank you for any help, p.s( ive just started using GSAP, very new.)

 

(example of what i mean in above)

TweenMax.staggerFrom(".navbar ul li", 1, {
delay: 2, opacity:0, y:8, ease: Expo.easeInOut
}, 0.2)
 
TweenMax.staggerTo(".navbar ul li", 1, {
delay: 2, opacity:1, y:0, ease: Expo.easeInOut
}, 0.2)

See the Pen aPyOoB?editors=0010 by m4rsibar (@m4rsibar) on CodePen

Link to comment
Share on other sites

Please provide a simpler demo next time. I have no idea what I'm supposed to be looking at.

 

"from" animations are always a big gotcha for new users. Think about what you're asking. You want to animate something from a certain value. Simple enough, but what value is it going to animate to? Whatever the current value is. If the opacity of an element is at 0, you can't animate from an opacity of 0. That would be going from 0 to 0.

 

Solution 1: Use fromTo animations. This will ensure it will animate to the desired end value.

 

TweenMax.staggerFromTo(".navbar ul li", 1, {
  opacity: 0,
  y: 8
}, {
  ease: Expo.easeInOut
  delay: 2, 
  opacity: 1, 
  y: 0  
}, 0.2)

 

 

Solution 2: Don't use from animations. I stopped using them years ago for reasons just like this. If I need something to start from a certain value, I'll set it first.

 

TweenMax.set(".navbar ul li", {
  opacity: 0,
  y: 8
});

TweenMax.staggerTo(".navbar ul li", 1, {
  ease: Expo.easeInOut
  delay: 2, 
  opacity: 1, 
  y: 0  
}, 0.2)

 

 

And speaking of from animations, this is the next problem that you'll probably encounter with them. Either way, it's a good video to watch.

https://greensock.com/immediateRender

 

And I'm not trying to say that from animations are bad, or that there is a fundamental problem with them. They do what they are designed to do, but they can be a little tricky when you're first starting out.

  • Like 4
Link to comment
Share on other sites

1 hour ago, OSUblake said:

If the opacity of an element is at 0, you can't animate from an opacity of 0.

But isn't the opacity of the element I'm trying to animate already 1? I don't understand why I cannot use only from, nor do I understand why what I'm trying to do works in this codepen example, but not my project. 

See the Pen MZEMLE by m4rsibar (@m4rsibar) on CodePen

 

Link to comment
Share on other sites

6 hours ago, m4rsibar said:

But isn't the opacity of the element I'm trying to animate already 1? I don't understand why I cannot use only from, nor do I understand why what I'm trying to do works in this codepen example, but not my project. 

 

 

It will work if the opacity is 1. You should probably start by verifying what the opacity is as a sanity check. I just did. It's not 1. When you click on the overlay, the opacity immediately gets set to 0.

 

See the Pen OrOLRZ by osublake (@osublake) on CodePen

 

 

 

 

 

  • Like 3
  • Thanks 1
Link to comment
Share on other sites

Again, from animations can be problematic.

 

Look at what happens when you interrupt this animation. Keep pressing play. It will never animate back to an opacity of 1. Every time you interrupt it, its opacity will get smaller and smaller. That's why I would recommend using one of the solutions I mentioned in my previous post.

 

 

See the Pen roYBjN by osublake (@osublake) on CodePen

 

 

 

  • Like 4
  • Thanks 1
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...