Share Posted May 17, 2019 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. See the Pen NVjydM by ikaizen (@ikaizen) on CodePen Link to comment Share on other sites More sharing options...
Share Posted May 17, 2019 Hello Ikai, Welcome to (the non-lurking side of) the forums! To me, it sounds like you should just look into the Intersection Observer API - with it you will be able to have each box fire a call to animate itself when it comes into view fairly easily. 3 Link to comment Share on other sites More sharing options...
Author Share Posted May 17, 2019 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? Link to comment Share on other sites More sharing options...
Share Posted May 17, 2019 5 minutes ago, Ikai said: Thanks @Dipscom for not bringing back stackoverflow's traumatic flashbacks by giving my question your attention I've said it before and I am not ashamed to say it again. I am scared of StackOverflow... You can add a Polyfill to cover the rest of the browsers (erm... IE) that do not support it. It's pretty good from what I have worked with. 5 minutes ago, Ikai said: Is there anyway to do 2 separate animations based on different responsive layouts? There are several. Bellow are a couple of discussions I can remember from the top of my head: 4 Link to comment Share on other sites More sharing options...
Author Share Posted May 17, 2019 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. See the Pen NVjydM by ikaizen (@ikaizen) on CodePen PS: I apologise if my JS is not correct. Link to comment Share on other sites More sharing options...
Share Posted May 17, 2019 While it doesn't fix it I think it should be new IntersectionObserver you had Obserber 1 Link to comment Share on other sites More sharing options...
Author Share Posted May 17, 2019 @Visual-Q Thanks for that, don't i wish that would fix it Updated, not that it makes much difference...... Link to comment Share on other sites More sharing options...
Share Posted May 17, 2019 Unfortunately I haven't used IntersectionObserver before and I can't read ES6 worth a crap otherwise I'd try and jump in. MDN looks like it has a pretty good walkthrough for setting them up: https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API 2 Link to comment Share on other sites More sharing options...
Share Posted May 17, 2019 Hi, A slightly different approach ... See the Pen xNrOyX by mikeK (@mikeK) on CodePen Happy testing ... Mikel 3 Link to comment Share on other sites More sharing options...
Author Share Posted May 17, 2019 @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! Link to comment Share on other sites More sharing options...
Share Posted May 17, 2019 Ikai, look at Mikel's post - That's the answer to your struggle. 2 1 Link to comment Share on other sites More sharing options...
Author Share Posted May 17, 2019 @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!!!! 2 Link to comment Share on other sites More sharing options...
Share Posted May 17, 2019 Hi @Ikai, Thanks. Here two worthwhile articles: tutplus: how-to-intersection-observer Jonathan Harrell: controlling-element-visibility Kind regards Mikel 4 Link to comment Share on other sites More sharing options...
Author Share Posted May 17, 2019 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? Link to comment Share on other sites More sharing options...
Share Posted May 17, 2019 Hi @Ikai, The pen is modified ... If that is the expected behaviour fine. Kind regards Mikel 1 Link to comment Share on other sites More sharing options...
Author Share Posted May 17, 2019 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. Link to comment Share on other sites More sharing options...
Share Posted May 17, 2019 In combination with css grid, it could be problematic. Test hard core ... 2 Link to comment Share on other sites More sharing options...
Share Posted May 17, 2019 Here another example (found at CodePen): See the Pen jowwro by mikeK (@mikeK) on CodePen 1 Link to comment Share on other sites More sharing options...
Author Share Posted May 17, 2019 @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? Link to comment Share on other sites More sharing options...
Share Posted May 17, 2019 Hi @ikai, It has - I suspect - something to do with both. During the forward and back action, the observer reacts strange ... Hence my second example. But I'm not a pro! Kind regards Mikel 1 Link to comment Share on other sites More sharing options...
Author Share Posted May 17, 2019 @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. Link to comment Share on other sites More sharing options...
Share Posted May 18, 2019 Hi @Ikai, Just do it using ScrollMagic, tweening the margin-top value and building two loops: See the Pen byRKWo by mikeK (@mikeK) on CodePen I do not know if there is a chance to tween grid-gap. @GreenSock ?? Happy weekend ... Mikel 1 Link to comment Share on other sites More sharing options...
Share Posted May 18, 2019 The boxes are moving out of position because (in Mikel's example) the Tween is set to be relative { y:"-=50" } so, whenever the intersection observer triggers, GSAP will tell the box to move from wherever it is plus another 50 units. Use absolute to stop that. Another thing to consider is to check if the box is already animating before creating the tween. The intersection observer fires when the element is entering the viewport and exiting so, depending on the speed of your scrolling or size of your viewport you might fire the call before the animation is finished. And, remember that you are moving the very same element that you are observing so, if you are observing when it enters or leaves viewport and you move it as it enters or leaves the viewport, there is room for triggering more events than you intend to if the movement brings/removes the element from the view. 3 Link to comment Share on other sites More sharing options...
Share Posted May 18, 2019 5 hours ago, mikel said: I do not know if there is a chance to tween grid-gap. @GreenSock ?? Animating grid-gap is not yet supported. It's on the horizon but hasn't arrived yet. 3 Link to comment Share on other sites More sharing options...
Author Share Posted May 18, 2019 @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? 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