Leaderboard

Hi @DD77 pls check these out : and the second one: are these what you looking for?

Diaco beat me to it Anyways, here's what I came up with: Edit: movement triggers when hovering. Edit2: Made the flow feel more natural. Added a slight rotation to see it from the side. If you want to see it from the top, just remove the rotation from the stage class.

Hi @geddski At first, for the Club GreenSock bonus plugins on Codepen; you can find the codepen safe versions here: https://codepen.io/GreenSock/pen/OPqpRJ And about your issue; pls try to wrap your spacing entities with a span tag. <span>&nbsp;&nbsp;.....</span> Splittext completely respects to <br> tags. btw, you can use "&emsp;" instead of "&nbsp;"

Great solution, Sahil! @vulture, Welcome to the forums. I had a bit of trouble assessing what you wanted your code to do. I'm sure you're just starting out with GSAP, no worries, there is a lot to explore. One of the great strengths of GSAP is its ability to group animations together in sequences called Timelines. Animations in a timeline do not have to follow a strict one-after-the-other pattern. They can overlap and even have gaps. You can even nest timelines in timelines. As you can see by Sahil's demo the 2 animations follow perfectly in sequence. No need for onComplete callbacks and setTimeout(). Also, if you want to set properties instantly (no animation) you can use the set() method. https://greensock.com/docs/TweenLite/static.set() I'm sure you will love timeline's once you get comfortable with them. Take a look at these articles / videos https://greensock.com/sequence-video https://greensock.com/position-parameter Good luck on your project. Happy Tweening!

Three!!

Not sure what happened to demo I posted, it was working while I was editing it. Anyway, you can do it like this and save yourself from all the calculation.

Hi Tasty, If you remove the ease on the stagger, you can clearly see why it's delayed: Using the 'visibility' property: Low duration stagger:

Great work Diaco and lennco! you make it look so easy

Ahh the span wrapper worked, thank you! I updated the pen with the safe version, will keep it around for anyone else who runs into this. Thanks again!

Also check out the exponential scale eases here. They will do the same thing without having to create a new tween on every update.

Hi @hanslibuzli Hmm, there's another simpler way; pls check this out : var zoom = 2; TweenMax.to('.outer',1,{scale:zoom,onUpdate:function(){ TweenLite.set('.inner',{z:0.2,scale:1/this.target[0]._gsTransform.scaleX}); } ,repeat:-1,yoyo:true })

I'm not sure I understand what the problem is. This works.

Thanks @lennco! I feel a bit stupid - less is more. Thank you for the options, visibility one suits me best. Good to know I can actually set the start of the separator to -1, now it looks quite smooth. Happy Tweening!

Welcome back, @Diaco

Is this what you're looking for?:

Hi rgfx Your section's width is bigger than its child and content doesn't overflow, try to remove section's width in your CSS or set to smaller value

Hi Rick May pls check this out :

Five!

Hello dear friends, No doubt Christmas is coming ... Hi @Jonathan - sorry, when I saw your new portrait, I just felt the need to redecorate my tree to dedicate it to the GreenSock community. I coded my first Christmas tree inspired by the work of Petr Tichy (here) Dec 2015. It was one of my first exercises. Kind regards Mikel

Seven!

This is how it looked to me.

Congrats! And perfect video choice. Not sure if this made it across the pond:

Like this.