Leaderboard

Welcome to the forums, @jellington. Thanks for putting together a demo - very helpful. There are a few problems: There's a logic issue - you're initially tweening to #end which works fine. Then, you try animating from() #end...but it's already at the #end state! So you're basically saying "tween from #end to #end" (no change). If I understand your goal properly, you'd just change the from() tween to a to() and make it go to #start. Here's a forked codepen: You were removing an element and then trying to remove it again which was throwing an error (if you open your Dev Tools, you'll see it in the console). That's unrelated to GSAP, but it halts JS execution. Does that clear things up? Happy tweening!

Ah yes, that's just because I added a 1 second delay (because I thought it looked better) to that handle appearing, so if you click too fast, it's possible to have the fade-out tween start BEFORE the fade-in one starts. It's just a timing thing. But it's very easy to fix - you just add overwrite:true and that basically tells the engine to find any other tweens of that element and kill them. I adjusted the codepen accordingly. Better?

Thanks for the super clear demo. Yes, there is a significant difference between how staggerTo() works on TweenMax and how it works on a Timeline (which probably isn't obvious to most users). From the docs: TweenMax https://greensock.com/docs/TweenMax/static.staggerTo() staggerTo() simply loops through the targets array and creates a to() tween for each object and then returns an array containing all of the resulting tweens (one for each object). TimelineLite / Max https://greensock.com/docs/TimelineMax/staggerTo() staggerTo() simply loops through the targets array and creates a to() tween for each and then inserts it at the appropriate place on a new TimelineLite instance whose onComplete corresponds to the onCompleteAll (if you define one) and then appends that TimelineLite to the timeline (as a nested child). So to further dig into your mystery its important to know what this is inside your function. If you console.log(this) for the TweenMax you will get the last tween, which means this.target is the target of the last tween. If you console.log(this) for the Timeline you will get a timeline (which is the new TimelineLite mentioned above). Timeline's don't have a target, which is why you are seeing undefined. Hopefully this helps you better understand what is happening. Again, its not something most people will pick up on in the first few weeks or even months of using GSAP. If you want to get the last target in a TimelineMax.staggerTo() you can use: new TimelineMax().staggerTo(".square",1,{y:30},0.1,0,function(){ console.log("With TimelineMax"); console.log(this.getChildren()[this.getChildren().length-1].target); });

I wonder if there's a way to set different classes on different lines or if there is a better way to achieve this effect? You can animate alternating lines with different values using the cycle property in a staggerTo/staggerFrom. Below is a simplified example showing that some lines go left and others go right, but they all use the same class. you can read more about cycle here: https://greensock.com/cycle Although that example uses SplitText it isn't required for these types of effects, you can do the same thing on a bunch of divs that you create.

Maybe something like this: Happy tweening.

Oh yeah, i did think about this. However, i messed up when i used opacity instead of visibility. I will update this as soon as i have the time. Thank you

I'm a little confused by the question too. Are you talking about that first animation where the picture overlaps the green background? If that's the case, I'd just use a clip-path or mask to reveal the image rather than a solid color overlay. If you put the image in a SVG and use a clip-path, you should get support across all browsers. Happy tweening.

Hi @Emilek1337. Welcome to the forums. I'm not sure I really understand your question. Is this related to GSAP somehow? Are you just asking how to make the background color of a <div> something specific? Sorry if I'm missing something obvious here - I read your question a few times and I'm still kinda lost.

I see, I understand and thank you for providing the information on the overwrite field!

Stagger school is in session. Professor @Carl is dropping knowledge.

Aye fast work, thanks a lot! Confirmed working in above codepen using the beta link you provided. Might post something else today if I can make a codepen of it

Ugh, I'm so sorry about that. Literally one character typo. Doh! Here's a fixed [uncompressed] version: https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/Draggable-latest-beta.js Better? I'll push this out in the next release.

Hi and welcome to the GreenSock forums, Thanks so much for the clear demo. Very helpful. We will have to look into this further. We will report back with what we find. Sorry for the inconvenience.

I figured it was after 5:00 on the East Coast so you were probably heading out for the evening to party it up.

Sounds like a perfect time to create your nested timelines in functions and return them to a master timeline. Here's a great article to help you get started. https://css-tricks.com/writing-smarter-animation-code/ Happy tweening.

You don't typically show a restart button until the banner is finished playing at least once. You can set your restart button as "visibility: hidden" in css, which prevents mouse clicks. You can use something like TweenLite.set(restart, {visibility: "visible"} or TweenLite.to(restart, 0.5, {AutoAlpha:1}) when you're ready to activate the button. The AutoAlpha property simultaneously sets opacity: "1" and visibility: "visible"

Hi @mercy I restructured the layout to match that other demo I posted.