tailbreezy

Hello there,
 
This issue probably has to do with your anchors placement or having too short of end value in scrollTrigger.
 

See the Pen 72901772ab1a6bc88593420b9d704353?editors=1010 by dadacoded (@dadacoded) on CodePen

Hello,
 
It uses the css @media syntax:
 
"(min-width: 800px) and (min-height: 800px)": function() {}  

Hello,
 
You can use one of gsap utilities.
 
let flower = gsap.utils.toArray(".flower"); let shuffled = gsap.utils.shuffle(flower) ... shuffled.forEach(item => { let stempath = item.querySelector(".stem"); ...  

Here is one more option using backgroundPosition instead.
 

See the Pen d14a7a2ce121e939a7728edf729768c4 by dadacoded (@dadacoded) on CodePen

How about these ways.
 

See the Pen 6d1c36c29ebb353ef0a6fcfc72f7fef7 by dadacoded (@dadacoded) on CodePen

var colors = ["#f38630","#6fb936", "#ccc", "#6fb936"]; //initially colorize each box and position in a row function setup() { gsap.killTweensOf('.box'); gsap.set(".box", { backgroundColor: (i) => colors[i % colors.length], x: (i) => i * window.innerWidth / 4 }); gsap.to(".box", { duration: 40, ease: "none", x: `+=${2 * window.innerWidth}`, //move each box 500px to right modifiers: { x: gsap.utils.unitize(x => parseFloat(x) % (2 * window.innerWidth)) //force x value to be between 0 and 500 using modulus }, repeat: -1 }); } setup() window.addEventListener('resize', setup)  
Have you tried to kill off the tweens of ".box" before rebuilding.
Apart from the obvious full rebuild.
 
Maybe also set the duration to more flexible value, so as to keep the relative speed when sizing down.
For example, this code speeds it up when resizing down.
 
duration: innerWidth / 30,  

tl.to( smileyface, { duration: .5, y: -150, ease: "back.inOut(1.7)", onReverseComplete() { idle.resume() }, onStart() { idle.pause() } }); tl.to( bubble, { duration: .4, opacity: 1, scale:1, transformOrigin: '80% 80%', ease: "back.inOut(1.7)" }, "-=0.3"); container.addEventListener("mouseenter", function(){ tl.play(); }); container.addEventListener("mouseleave", function(){ tl.reverse() });  
Just noticed the .then call. First time I see one. So I removed it  
I have also added onStart and onReverseComplete and the glitch seems to have resolved,  at least I cannot trigger it.
I will go mad if I keep popping those bees, so check for yourself to see if it is good now.
 
Also the more pronounced movements surely did help to spot the issue.

Here is the pen from the video, in case you want to deconstruct it.
Basically ScrollTrigger is scrubbing through the whole animation one tween at a time, since there are no overlaps set.
 

See the Pen qBdzqmR by GreenSock (@GreenSock) on CodePen
 

Maybe something as simple as that.
 

See the Pen 0c4313a6ba4654d309899fa967c91102 by dadacoded (@dadacoded) on CodePen

Just change your trigger and you are good to go. Also you will need some height/spacer at the end because you will not be able to reach the last trigger.
 
trigger: item  

for (const box of boxes) { timeline.to(box, { x: 200, },0) timeline.to(box, { y: Math.floor(Math.random() * (50 - 10 + 1) + 10), },'>') }  
Not sure what you are after but if you want all the boxes to move simultaneously on the X and then simultaneously on the y.
 
Also, if you additionally want to match timeline2, you can add a label to master and attach timeline2 there.
const master = gsap.timeline() master.add('tlStart'); master.add(functionOne()) master.add(functionTwo(),'tlStart')  

See the Pen 86f651c2adbbc6202d5ac7f8d1d944c8 by dadacoded (@dadacoded) on CodePen

A few things.
 
Moving your .para xPercent:100, moves it to the right by the value in offsetWidth which about 8000px.
Instead you can position it with left: "100%" to be right after the right edge — making it start immediately upon entering the trigger.
 
Additionally, if you want the animation to happen naturally you can to add that value (8000px) to the end marker of ScrollTrigger.
 

See the Pen 5536b576f1bf00911ee64c4f7e7c65b9 by dadacoded (@dadacoded) on CodePen

secAbtTl .from( ".sec-about-presentation h1", { // yPercent: 100, opacity: 0, stagger: 0.1 }, "<0.5" )  
"<0.5"
This adds 0.5 delay at the start of the tween.

There are so many ways to achieve this.
On top of my mind is this padding-bottom/padding-top hack.
 

See the Pen 4276699bb20421d490ac62763aea9d95 by dadacoded (@dadacoded) on CodePen

These staggers that happen near to each other time-wise are a job for ScrollTrigger.batch
It essentially triggers them in close proximity to each other.
 
You can read up on the method in the docs. It is quite extensive and thorough.
https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.batch()
 
Additionally, you can also add back onLeave and onEnterBack as in the docs, if you want to re-trigger the first batch as well.
 

See the Pen 94b47a1c756f829787ed27e177cd0b36 by dadacoded (@dadacoded) on CodePen

See the Pen a857e4688b781736144d36ef485d3a3c?editors=0110 by dadacoded (@dadacoded) on CodePen

Hello guys,
 
I stumbled upon a surprising problem with scrub.
When I scrub the animation plays to maybe variable progress values depending on viewport height, but never to progress(1).
Solved it.
Turns out scrub is totally dependent on having end value set on your ScrollTrigger and you get weird results when not setting one.

Wow. Would have never thought of this.