Leaderboard

@ZachSaucier Thanks, I hope I will! I've added the GIF for a better visual representation because you've said on SOF that you can't see any lags. I tried adding will-change: transform, opacity; which does not seem to help and also tried using TweenMax.lagSmoothing() but I'm not sure if I did it correctly.

Hi Zach, I should have mentioned this was years ago and as in the meantime GSAP has been whitelisted and I cannot find any articles mentioning Math.random is not allowed, I guess Google has updated its policy. Thanks for your answer and great product!

Hey Flashdesigner, welcome to the forums and thanks for being a Shockingly Green member! We couldn't do what we do without people like you. You can check what GSAP uses (including Math.random) by searching through the code on GitHub. The only parts not on publicly available on GitHub are the club member only parts. A search there shows that GSAP does use Math.random. What issues are you worried about related to Math.random? Is there an article that you're thinking of? GSAP is hosted on Google's own CDN (and often isn't even counted against you in your kb total) so it shouldn't have any issue being in banner scripts.

Yes, I realized last evening that I mistakenly put the options in the .observe call instead of the Intersection Observer construction. I'll fix that now.

Hello GlitterCritter and welcome to the GreenSock forums. We temporarily disabled them, but we made them accessible again in your account dashboard. You can find the download links there

Hey @ZachSaucier, With your code I have problems to use rootMargin or threshold. Hence this concept: https://codepen.io/mikeK/pen/XWWpYPy Kind regards Mikel

Thats perfect, i had missed to call the function, inside another anoter one, thanks again i am really apreciated it . 🤗

That would work (it's slightly less performant but you shouldn't notice in the vase majority of cases) if you only have these elements on the page. If you have multiple sets you could do the same but use the container as a reference instead of the document.

https://codepen.io/GreenSock/pen/gOOgwZV?editors=0010 I did several things here: I switch out the anchors that you had for real buttons. There's no reason why you should use an anchor for moving slides/images, anchors are for navigation. I switched your (now real) buttons to use the disabled attribute instead. This is not only more semantic and accessible, but is easier to manage via CSS. I simplified your enable/disable function. You really are just checking two things: 1) is the counter at the first position? and 2) is the counter at the last position? Based on that information, you set the state of the buttons. I changed your (not working) animations for each box to animate the container instead. It's simpler and more logical. I added a resize event on the window to keep it responsive. I assumed you would allow the button to be clicked before the animation completes. If you don't want this, you will need to keep track of the animations and check .isActive(). Let me know if you have any questions about my approach! Happy tweening.

When you say leaving the page idle.. do you mean leaving the page idle when the browser tab is active (selected) ?? or when it is not active (not selected) ?? Because if its when the browser tab is not active, then you can just pause your animation by checking the HTML5 Visibility API. And then when you give the browser tab focus, making it active again.. you can resume / play the animation. Example of use: https://codepen.io/jonathan/pen/sxgJl Happy Tweening

Yeah, it's just a JavaScript thing. When you this.props.dispatch(setColor('#1b00ff')), that runs it immediately because the () act as an instruction to invoke the function. You just need to wrap it in a function: .call(function() { this.props.dispatch(setColor('#1b00ff')) }, null, this, '+=2') You were missing the params parameter too. https://greensock.com/docs/v2/TimelineLite/call() Does that clear things up?

Hey @Juraj, Welcome to the GreenSock Forum. You could play() and pause(0) a timeline which is paused. Here's an example with intersectionObserver https://codepen.io/mikeK/pen/GVpojX Happy tweening ... Mikel

Here is an example integration of ScrollMagic along with Smooth Scrollbar. https://codepen.io/luluberlu/pen/gZGwoW The integration of those two is also discussed in the following discussion (perhaps others also). https://github.com/janpaepke/ScrollMagic/issues/652 Maybe that might assist you in some way if you wish to take that approach. Of course test extensively regardless of what approach you take to ensure what you create is performant across browsers and devices as the users scroll. @OSUblake, 😁 that example and related thread(s) will never die, its part of your legacy here at the forum. ;--) ¯\_(ツ)_/¯