Jump to content
Search Community

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

Ikai test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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

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. 

 

 

PS: I apologise if my JS is not correct. 

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

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

@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

@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

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

@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.
×
×
  • Create New...