[ARRAY + RANDOM + REPEAT]

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.

[ARRAY + RANDOM + REPEAT]

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

 

[ARRAY + RANDOM + REPEAT]

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.

[ARRAY + RANDOM + REPEAT]

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

[Webflow + Wizardry technique + Scrolltrigger = Offset issues]

10 minutes ago, GreenSock said:

Yep, it looks like our suspicions were correct - you've got:

loading="lazy"

on those images. So they're not loaded initially, collapsing the layout.

 

Solutions I see: 

1. Don't do that
2. Set an explicit height/width on those elements so that they don't shift layout when the images load. This is probably the best option in my opinion. 

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 !

[Webflow + Wizardry technique + Scrolltrigger = Offset issues]

9 minutes ago, OSUblake said:

I've looked at it numerous times, and the markers are in same place every time. 🤷‍♂️

 

Just wondering if there might an issue with your scripts. You are loading GSAP and ScrollTrigger twice. 😲

 

 

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

[Webflow + Wizardry technique + Scrolltrigger = Offset issues]

9 minutes ago, GreenSock said:

Yep, Blake is exactly right. 

 

This is definitely more of a Webflow question. I'm totally unfamiliar with it. They just need to tell you how to trigger JavaScript when the ENTIRE page is completely finished loading and shifting the DOM around. That's where you'd put your ScrollTrigger.refresh() call. Perhaps you should reach out to the Webflow community. If we don't have a minimal demo (like a CodePen or CodeSandbox), it's almost impossible to troubleshoot effectively. 

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.

[Webflow + Wizardry technique + Scrolltrigger = Offset issues]

Ok i put the markers, obviously before refresh they are just not at the correct place.

https://arperton.webflow.io/

[Webflow + Wizardry technique + Scrolltrigger = Offset issues]

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>

 

[Webflow + Wizardry technique + Scrolltrigger = Offset issues]

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.

 

[Webflow + Wizardry technique + Scrolltrigger = Offset issues]

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 !