Leaderboard

It's telling you that tl is not defined because you have masterTl in your function. //switch this var masterTL = new TimelineMax(); tl.to(trail, 2, {alpha:1, rotation: 360}); return tl; //to this var tl = new TimelineMax(); tl.to(trail, 2, {alpha:1, rotation: 360, transformOrigin:"center center"}); return tl; Make that change and you'll be good to go. Happy tweening.

Hi, Like this one? Happy shadowing ... Mikel

There would be several ways to make that happen. If you perform a search of the forum for 'infinite carousel', you'll find plenty of threads and demos to get you started. Here's a good example. PS We're always happy to help with your GSAP related questions, but please don't re-post your question again on an unrelated thread after waiting only an hour for a response. The forum is fairly quiet on the weekends so you may not always receive an answer as quickly as you'd like.

Hello @Mike_king I understand you need help but we need to keep the posts clear of clutter from other topics. I see you already posted your new topic, that is good. But please try not to post messages for help from another topic inside another topic. This will clutter up this topic and make it hard for other community members looking for answers and seeing off topic questions. Thanks

Hi @dorijacobson It's really hard to say without seeing the code you have. Can you provide a CodePen of the issue?

Your spans have white background so they weren't disappearing just you couldn't see them. toggle-btn had typo in css so it wasn't getting position fixed. The menu is visible on mobile because you were animating to -100% but your element had height 100vh, so it would stay in viewport because whatever '100%' is, it was less than 100vh. You should avoid animating height, width, top, left etc because they trigger layout repaint, animate transforms instead whenever possible because they take advantage of GPU and perform better. So your animation can be achieved animating yPercent instead of top. You can learn more about animating transforms, https://greensock.com/docs/Plugins/CSSPlugin

Hi @Wess Sorry, I'm not understanding what you're asking. Did you mean the boxes would size responsively? Do you have a demo of what you'd like to achieve? Thanks.

For animations like that you'll most likely want to use canvas or WebGL. Seems like three.js would be a good possibility for your needs. https://threejs.org/ This is not to say it can't be done by cloning DOM or SVG elements. It's just that it probably won't perform as you'd like. In answer to your question, no there isn't any out-of-the-box duplication feature of GSAP. You'd create the elements in a loop or by cloning an original. After they're created, GSAP will have no problem animating them. Hopefully that helps a bit. Happy tweening.

Hey everyone We’re rolling up on Thanksgiving here in America, so I thought I’d say how thankful I am for this forum. You’re a terrific group of people and one AI. I’m so glad I started participating a few years ago. It’s truly been life changing. As a thank you, I’m gonna drop a couple sliders here for the community. I know there are umpteen ways to make a slider, but this is my take on it. I added multiple control types and linked the nav dots animation to the draggable element for a bit of fun. We often have questions about sliders so hopefully these will be a good jumping-off point for someone. Happy Tweensgiving

Very slick, @PointC. Thanks for sharing and for being such a central part of the GreenSock community. No doubt these demos will serve people well.

@OSUblake has written a ton about canvas. If you search the forum, you'll find many helpful threads. Here's one about migrating from SVG to canvas. Happy tweening.

Hi @wellygirl, I've been thinking about how the movement to the left could run more precisely. Here is a version with stepsEase (unfortunately it jumps): Here's the try with a callback. But it does not work in the backward movement (?): Hope, you will find your solution. Mikel

Could you possibly put together a simple demo for us? Thanks.

I didn't see any problems with it. The only other thing you could consider doing to optimize performance (though probably not significant) is to batch all your canvas drawing into a single onUpdate that sits on your timeline (or a TweenLite.ticker.addEventListener("tick")) instead of an onUpdate in every tween. But again, we're probably splitting hairs here. @OSUblake is our resident canvas expert, and @Sahil has been diving in lately too, so those guys may have other advice.

Yeah! drop-shadow exactly what i need, thank you very much

Hi Jonathan, Thanks for your reply, that all makes good sense ? I’ll give what you’ve suggested a try and if I’m still struggling will strip out what I need to get it on CodePen. Best regards, Al.

Hi @wellygirl, There are certainly some alternatives. Here is a variant ... If you need a real candidate for your list ... Happy scrolling ... Mikel