Ikai

Guys it's solved. Thanks to @Dipscom pointing out the reason the boxes were moving because of the relative units in the Tween. I tested it a gazillion times to make sure the boxes did not move out of position and it passed. Thank you @mikel you have been super helpful. Thank you all for your time and effort! https://codepen.io/ikaizen/pen/ZNJzvm

@Dipscom Thanks for your input, i also had some suspicions about the relative/absolute positioning of the boxes. if i understand it correctly, Is there anyway i can achieve this absolute positioning of the boxes, within my fluid grid-template-areas layout to achieve this? And also i believe there is a isActive() method i can use to determine if the box is already animating? Thanks a ton! Update: Sorry @Dipscom I may have misunderstood your point about the "Tween is set to be relative { y:"-=50" }". Do you mean that i have to use absolute on my box's layout or use absolute measurements on the Tween? And if so can you please give me an example?

@mikel Yes it's really strange. The more you scroll the more the boxes move out of original position in all kinds of different directions. I also tested the code in my real project and for the first few scrolls it works amazing and everything remains in their original positions, but then some boxes start randomly changing positions, and this is without resizing the window by the way. If anyone thinks they know the answer to this, please help, i will try to investigate in the meantime.

@mikel Thanks for the other example Mikel. I have to say, in our example, when i scroll a few times, the boxes start to drift from their original position. Do you think this is a IntersectionObserver issue, or with the animation?

Thank you for the help again @mikel That is what i had in mind but there is some unusual behaviour when scrolling up. I played around with it a little bit, and i think i will go for the horizontal (x) animation cause it looks much better with this. Thanks again.

Is there anyway i can use TweenMax.from with this to make it ease/fade up to its original position? So something like this: TweenMax.from(entry.target, 0.5, { ease: Power1.easeOut, y: 200, opacity: 0 }); I know that in the code visibility is none, so will that conflict this Tween?

@mikel Wow you are a true superhero! This is exactly what i was trying to go for. I'm going to make sure i understand every line of your code. Thank you so much!!!!

@Visual-Q Thanks, i have been reading the MDN documents but some aspects keep confusing me. If you have any other ideas that don't rely on ES6 please do chime in, if you are bothered of course. Thanks again!

@Visual-Q Thanks for that, don't i wish that would fix it Updated, not that it makes much difference......

I've been at it for hours trying to wrap my head around the Intersection Observer API and how i can properly do this. I have this code so far but I'm not so sure why i can't get it to work on the pen, some help would be super super appreciated. https://codepen.io/ikaizen/pen/NVjydM PS: I apologise if my JS is not correct.

Thanks @Dipscom for not bringing back stackoverflow's traumatic flashbacks by giving my question your attention I already looked at he Intersection Observer API, the only thing that putt me off a little bit is the browser support which i think right now is above 80%. But i will give it a try and start playing around with it. Is there anyway to do 2 separate animations based on different responsive layouts?

Hey everyone, I have been reading this forum for a long time but this is my first post/question as i have come across a dilemma. Hope you're all doing well. I wanted to include my JS code in the codepen but it's a big crazy mess. As you guys can see in my codepen i have a section in the project I'm building which on large screens has 2 rows with 3 boxes in each row and on small screens 1 column with all boxes stacked on top of each other. What i want to accomplish is really simple, i just want each box to fade in from the bottom-up as it comes in view. The reason I say each box is because my priority is more on the small screens with 1 column, I'm willing to compromise for large screens and what i mean by compromise is that i don't mind if the whole row animates together as it comes in view and then followed by the next row. I kind of achieved this in a very unusual way with code that is terribly wrong, and i looked at plenty of scrollmagic and GSAP examples including in this forum but i didn't come across any solutions. I would really appreciate any help in how i can achieve this. Thank you.