GSAP/ScrollMagic on-reveal animation for simple responsive layout confusion!

[Ikai 5 Likes (Newbie)]

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

[Dipscom 3,373 Likes (Superhero)]

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.

[Ikai 5 Likes (Newbie)]

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?

[Dipscom 3,373 Likes (Superhero)]

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:

 

 

 

[Ikai 5 Likes (Newbie)]

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. 

[Visual-Q 979 Likes (Leader)]

While it doesn't fix it I think it should be new IntersectionObserver you had Obserber

 

 

[Ikai 5 Likes (Newbie)]

@Visual-Q Thanks for that, don't i wish that would fix it

Updated, not that it makes much difference......

[Visual-Q 979 Likes (Leader)]

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

[mikel 4,782 Likes (Superhero)]

Hi,

 

A slightly different approach ...

 

See the Pen xNrOyX by mikeK (@mikeK) on CodePen

 

Happy testing ...

Mikel

[Ikai 5 Likes (Newbie)]

@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!

[Dipscom 3,373 Likes (Superhero)]

Ikai, look at Mikel's post - That's the answer to your struggle.

[Ikai 5 Likes (Newbie)]

@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!!!! 

[mikel 4,782 Likes (Superhero)]

Hi @Ikai,

 

Thanks.

 

Here two worthwhile articles:

 

tutplus: how-to-intersection-observer

 

Jonathan Harrell: controlling-element-visibility

 

Kind regards

Mikel

 

[Ikai 5 Likes (Newbie)]

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 4,782 Likes (Superhero)]

Hi @Ikai,

 

The pen is modified ...

If that is the expected behaviour fine.

 

Kind regards

Mikel

[Ikai 5 Likes (Newbie)]

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. 

[mikel 4,782 Likes (Superhero)]

 

In combination with css grid, it could be problematic.
Test hard core ...

[mikel 4,782 Likes (Superhero)]

 

 

Here another example (found at CodePen):

 

See the Pen jowwro by mikeK (@mikeK) on CodePen

 

 

[Ikai 5 Likes (Newbie)]

@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? 

[mikel 4,782 Likes (Superhero)]

 

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

 

 

[Ikai 5 Likes (Newbie)]

@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 4,782 Likes (Superhero)]

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

 

 

[Dipscom 3,373 Likes (Superhero)]

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.

[Dipscom 3,373 Likes (Superhero)]

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.

[Ikai 5 Likes (Newbie)]

@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?