sango10 Posted March 7, 2022 Share Posted March 7, 2022 Hi everyone, Here is the goal: I have a list of words that i want to show and hide one by one randomly, and make it infinit ! Sound simple but iam not a dev so i can handle basics of gsap, this one is just too tricky for me. I put this codepen which was made by Colloque Tsui® as a reference, in my case i do not need any button to start the animation, i would like it to start on page load. Is there any gsap rockstar that can help me with it ? Best regards See the Pen NxwmQE by colloque (@colloque) on CodePen Link to comment Share on other sites More sharing options...
mikel Posted March 7, 2022 Share Posted March 7, 2022 Hey @sango10, You could use GSAP SplitText. SplitText makes it easy to break apart the text in an HTML element so that each character, word, and/or line is in its own <div>, making complex animation simple. So split into words and stagger the animation using from: "random". Here an example - using chars: See the Pen yLgOMbm by mikeK (@mikeK) on CodePen Happy tweening ... Mikel 2 Link to comment Share on other sites More sharing options...
sango10 Posted March 7, 2022 Author Share Posted March 7, 2022 22 minutes ago, mikel said: Hey @sango10, You could use GSAP SplitText. SplitText makes it easy to break apart the text in an HTML element so that each character, word, and/or line is in its own <div>, making complex animation simple. So split into words and stagger the animation using from: "random". Here an example - using chars: Happy tweening ... Mikel Thank you good Sir ! Well iam not sure this is really what i need, my goal seams to be much more simple than this complex animation. Do you know if there is a more simple way to achieve this ? In my case, words are in seperated divs with same class already, and i just want them to appear and disappear one by one randomly. Link to comment Share on other sites More sharing options...
mikel Posted March 7, 2022 Share Posted March 7, 2022 Hey @sango10, There are a lot of possibilities ... See the Pen QWOPwVB by mikeK (@mikeK) on CodePen Happy tweening ... Mikel 3 Link to comment Share on other sites More sharing options...
Cassie Posted March 7, 2022 Share Posted March 7, 2022 Heya, If you want you code snippet to run on page load, all you need to do it to take it out of the onClick function. Like so // on click $("button").click(function(){ var hexagon = $('.hexagon').toArray(); TweenMax.set(hexagon, {autoAlpha: 0}); hexagon.sort(function(){return 0.5-Math.random()}); TweenMax.staggerTo(hexagon, 0.3, {autoAlpha: 1, ease: Quad.easeInOut}, 0.1); }); // on load var hexagon = $('.hexagon').toArray(); TweenMax.set(hexagon, {autoAlpha: 0}); hexagon.sort(function(){return 0.5-Math.random()}); TweenMax.staggerTo(hexagon, 0.3, {autoAlpha: 1, ease: Quad.easeInOut}, 0.1); However, it is using old GSAP 2 syntax and some of it isn't really necessary, so you could rewrite it like so gsap.set('.hexagon', { autoAlpha: 0, }) gsap.to('.hexagon', { autoAlpha: 1, duration: 0.3, ease: 'ease.inOut', stagger: { each: 0.1, from: 'random' } }) See the Pen jOaREoQ?editors=0011 by GreenSock (@GreenSock) on CodePen 3 Link to comment Share on other sites More sharing options...
Cassie Posted March 7, 2022 Share Posted March 7, 2022 oop double teamed that, sorry @mikel ✨ 1 Link to comment Share on other sites More sharing options...
mikel Posted March 7, 2022 Share Posted March 7, 2022 No problem ... Or See the Pen rNYbVNN by mikeK (@mikeK) on CodePen The big choice ... Mikel 2 Link to comment Share on other sites More sharing options...
sango10 Posted March 7, 2022 Author Share Posted March 7, 2022 19 minutes ago, mikel said: Hey @sango10, There are a lot of possibilities ... Happy tweening ... Mikel hmmm sorry sir, this is not what iam looking for. Here is where i miss the point or the logic of it: I need each div to appear AND diseappear one by one - i mean only one can be displayed at a time - randomly and forever, from a list of divs that share the same class. In you last exemple, divs appearing one by one randomly, then diseappearing all together, then the complete animation restarts, in a new random order... Sorry if i am not precise enough, and thank you for your precious time... Link to comment Share on other sites More sharing options...
Solution mikel Posted March 7, 2022 Solution Share Posted March 7, 2022 Some logic and here we are ... See the Pen yLPrNKy?editors=1010 by mikeK (@mikeK) on CodePen Sun is shinning and in a few minutes I am out of home ... Mikel 3 Link to comment Share on other sites More sharing options...
sango10 Posted March 7, 2022 Author Share Posted March 7, 2022 14 minutes ago, mikel said: Some logic and here we are ... Sun is shinning and in a few minutes I am out of home ... Mikel MASSIVE THANKS !!! This is exactly what i wanna do... Please enjoy your sunny day Sir, thank you so much for your time. 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now