Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Ikai

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

Recommended Posts

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

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.

  • Like 3
Link to comment
Share on other sites

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

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:

 

 

 

  • Like 4
Link to comment
Share on other sites

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

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

 

 

  • Like 1
Link to comment
Share on other sites

@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

Hi,

 

A slightly different approach ...

 

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

 

Happy testing ...

Mikel

  • Like 3
Link to comment
Share on other sites

@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

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

  • Like 2
  • Haha 1
Link to comment
Share on other sites

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

  • Like 2
Link to comment
Share on other sites

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

Hi @Ikai,

 

The pen is modified ...

If that is the expected behaviour fine.

 

Kind regards

Mikel

  • Like 1
Link to comment
Share on other sites

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

 

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

  • Like 2
Link to comment
Share on other sites

 

 

Here another example (found at CodePen):

 

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

 

 

  • Like 1
Link to comment
Share on other sites

@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

 

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

 

 

  • Like 1
Link to comment
Share on other sites

@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

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

 

 

  • Like 1
Link to comment
Share on other sites

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.

  • Like 3
Link to comment
Share on other sites

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.

  • Like 3
Link to comment
Share on other sites

@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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×