sango10

MASSIVE THANKS !!! This is exactly what i wanna do... Please enjoy your sunny day Sir, thank you so much for your time.

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...

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.

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

OMG !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! Damn the lazy load is a default setting in webflow........ i removed it on every pictures of the page and it fixed the issue !!!! You have no idea how much time i spend trying to figure it out, and now i can fix the same issue on other websites i made recently. Thanks so much to both of you GreenSock & OSUblake for your time, you made my day !

Ah yes thank you, in all my test i forgot it.

Actually i contacted a week ago the creator of wizardry technique but i didn't get answer. This is non-native webflow technique so i have no faith in webflow answer. Iam lost ! The truth is i can replicate this kind of animations inside webflow, but this is not as good as gsap in term of fluidity. BTW thank you for your precious help.

Ok i put the markers, obviously before refresh they are just not at the correct place. https://arperton.webflow.io/

Oh i guess i should give you the few lines of code that are embed in the before tag of the website, maybe this part is creating conflict : <noscript> <style>@media only screen and (min-width: 992px) {body {font-size: 1rem;}}</style> </noscript> <script> function setFontSize() { let maxWidth = 1920; let windowWidth = $(window).width(); if (windowWidth >= maxWidth || windowWidth < 992) { $('body').removeAttr("style"); } else { let fontSize = (windowWidth / 100) / 16; $('body').css('font-size', fontSize + "rem"); } } setFontSize(); window.addEventListener("resize", function() { setFontSize(); }); </script>

Wow i wasn't expecting answers that fast, thank you guys. Sadly i don't know where to put this line of code, iam from design side ! Here is my slice of code : <script> gsap.registerPlugin(ScrollTrigger); ScrollTrigger.defaults({ markers: false }); gsap.to(".norookies", { opacity: "100%", scrollTrigger: { trigger: ".img_rookies", start: "top center", toggleActions: "play none none reverse" } }); gsap.to(".nogreenwashing", { opacity: "100%", scrollTrigger: { trigger: ".img_greenwashing", start: "top center", toggleActions: "play none none reverse" } }); gsap.to(".nogimmicks", { opacity: "100%", scrollTrigger: { trigger: ".img_gimmicks", start: "top center", toggleActions: "play none none reverse" } }); </script> The first animation works fine, the second starting around 50vh earlier than expected, the last one around 100vh earlier... If i refresh, everything is working. I am missing a concept here... Please feel free to watch live link (the issue concerned the section "ARPERTON") : https://arperton.webflow.io/ Big thanks for your time.

Hi everyone, Iam 36 years old, i never asked for help before, but iam struggling too much on this so i guess it's time... Iam using webflow, wizardry technique for an awsome fluid responsive (obviously the issue coming from it), and gsap scrolltrigger. After setting my animations based on scroll with gsap, the second animation (and the next, etc...) starts too early, or too late ! Then i refresh the page, and each animation respond correctly with it trigger. I can't make a codepen demo because of the wizardry setup, so iam just hoping someone figured out how to fix it. Iam praying the Web Gods to get an answer. Cheers !