Jump to content
Search Community

Flip.isFlipping.isFlippingAWESOME = true :)

Jim Nayzium test
Moderator Tag

Recommended Posts

Okay - because I am so new to GreenSock, I am actually proud of my first little victory here! Thanks for the help with the FLIPPING TUTORIAL to JACK@Greensock (Not sure how to tag someone yet, but Jack posted the Flip tutorial codepen in another thread I was commenting in and it was amazing!) 

 

So now my questions remain:

  1. OF course there has to be a better way for what I am doing here!
  2. What are the better ways to do what I am trying to do with the scroll functionality?? (You will see my "doodoo" variable counting the number of times the function fires, and I am sure there is a much better way than that surely?) **Forgive the use of the "var doodoo" as this is my way of marking my own code with things I know intuitively are not being done "the best way" but are, in fact, doing what I hoped to accomplish, even if it's lucky! 😃
  3. Everything I tried as an alternative, kept running the functions over and over again while I was scrolling so it would reset the animations in a very undesirable way. I am sure there is an elegant solution once I see it, but my experience with .onScroll functionality is novice at best.
  4. Is there a better way to detect the NEW HEIGHT that the "must-read-this" div needs to know in order to "move down enough to be seen under the animation?" I assumed that it would have to be calculated in the onComplete function since the height won't be calculated until that animation is complete, right? I would much prefer it all happen at the same time instead of incrementally like it is now, but I can certainly live with what I have created here!!
  5. There is always one little flash of it not quite working then presto it works!! I am sure that is my coding CAUSING that somewhere but I couldn't figure it out. Cool points to whoever does see where I have doubled-up something and or omitted something. I bet it's related to number 4 :)
  6. EDIT: added number 6 -- Also the CodePen at the CP site doesn't overlap the newly floated fixed boxes at the top. I would prefer the WWW and YYY boxes wrap their text and just fit together properly whether at codepen or on the forum. Any ideas there? I thought flex: 1 0 auto would do that... maybe I needed flex: 1 1 auto so it would shrink? 

 

THANKS FOR ALL THE HELP -- LOVING GREENSOCK!!

 

 

See the Pen LYWVNQj by JimNayzium (@JimNayzium) on CodePen

Link to comment
Share on other sites

I don't have time to weed through all the code and rebuild it for you right now, but here's some general advice:

  1. You don't need $(window).scroll(...). That's very expensive. Just use a ScrollTrigger. 
  2. First, just try getting the stuff to flip states immediately (like...don't even use Flip plugin or do any animation whatsoever). So maybe a ScrollTrigger fires onToggle and in that handler, you add/remove classes or whatever to change your CSS rules to make things look the way you want in the other state.
  3. Once you've got that working, THEN you can move to animating between the states. Flip plugin will make that a lot easier. 
  4. I think you might be over-engineering things a bit :) (no offense - I've done plenty of over-engineering myself over the years). I'm pretty confident you can knock this out with a relatively simple ScrollTrigger and Flip (assuming I'm understanding your goal correctly)

Glad to hear you're enjoying the tools! And thanks for being a Club GreenSock member! 🙌

  • Like 1
Link to comment
Share on other sites

I agree for sure about over engineering!! And there is no physical way possible you can offend me! I love any time a person offers correction and or advice!!  (Even on StackOverflow when they crush hours of my novice google-and-pasted work !!! I love learning the right-er way of doing things!!)
 

i sort of did exactly what you said.  I got it all working with zero animations. And it instantly changes to exactly what I wanted. 
 

But then in the actual web page where it will be deployed the instant change was confusing and didn’t lead the eyes to make the jump pop to a sticky menu type thing make a lot of visual sense. This is what led me to attempt the animations.  
 

My first go actually just had a duplicate of the content with different classes to display the content horizontally more effectively in a 4x1 instead of a 2x2. And a simply hide show JQUERY which was almost acceptable. But intuitively it lacked that mental “click” of “this new horizontal thing appearing is the same content that you just scrolled by.” 
 

So that’s when I embarked on trying to show the client scrolling that these four div tags literally move and resize to land in their new locations.  
 

As for rewriting my code - don’t worry!! Just the ideas are enough for me!! ScrollTrigger seems so much better already it makes me feel dumb for not learning all that Gsap has to offer first!! It’s like an entire twelve grades of school and this project is pressing! Hahha. 
 

I will work up a scrolltrigger Version today and I bet a ton of stuff just solves itself!! 
 

thanks again! 

 

Edited by Jim Nayzium
Added the stackoverflow line at the start :)
  • Like 2
Link to comment
Share on other sites

Okay - so I dove in on the ScrollTrigger and YES it seems it will be super easy once I figure out the pin-spacer shenanigans!

 

In the sample you give with the orange/red/blue the pin spacer code looks like this:

 

<div class="pin-spacer" style="place-self: auto; grid-area: auto / auto / auto / auto; z-index: auto; float: none; flex-shrink: 1; display: block; margin: 5.76px 0px 19.2px; inset: auto; position: relative; overflow: visible; box-sizing: border-box; width: 800px; height: 86px; padding: 0px;">

For mine, all I want to happen is basically to create a regular top menu that hangs there the entire time the user scrolls all the way to the bottom of the page. So I logically put "#footer" as the "endTrigger:" -- and what I get is a 7000pixel deep white space then all my content, which then bumps the PINNED div and takes it up and away... 

 

I want all my other divs to scroll up under it like it's the "new menu" type deal.

 

THIS Is what my pin-spacer div looks like

<div class="pin-spacer" style="z-index: auto; float: none; flex-shrink: 1; display: flex; margin: 0px; inset: auto; position: relative; overflow: visible; box-sizing: border-box; width: 1000px; height: 7479px; padding: 0px 0px 7049px;">

The remaining content on the page is a combination of a bunch of FLEXBOXES --- I am trying to isolate the issue out to find the conflict and post a codepen, but it's a doozy to get it all pulled apart and what not. I am simply tryign to do this:

 

gsap.registerPlugin(ScrollTrigger);

ScrollTrigger.create({
  trigger: "#pin_me",
  start: "top top",
  endTrigger: "#footer",
  end: "top top",
  pin: "#pin_me"
});

Is there a simple thing I am missing? I realize the white space is there to compensate for the PINNED Div right? But my pinned div is like maybe 200-300pixels tall... not 7000. The entire page down to the footer is 7000px which is like what it seeems like its calculating?

 

I came back and edited my original PEN and recreated the issue there (not the real page as referenced above with 7000px but the problem of all the whitespace is still there on this codepen so it's something I am doing I assume!)

 

See the Pen wvJKogX by JimNayzium (@JimNayzium) on CodePen

 

 

Link to comment
Share on other sites

OKAY maybe I am a MORON!! I think I just figured it out. I will repost here. Don't spend time solving this yet!! hahaha I feel like I didn't understand it fully the first time, but the sample now makes sense. 

 

THE PINNED div is inside the SCROLLED div... so that's why the lenght gets so long... 

 

But I am still confused as to why the div gets UNPINNED and moves up the screen before  the "#footer" arrives! I will figure it out though.

Link to comment
Share on other sites

Okay - I went and watched the entire video, did a few tutorials, tried to strip it all the way down and it got WORSE for me!!! I am sure I am doing something inherently wrong with this thing...

 

See the Pen YzZyZrP by JimNayzium (@JimNayzium) on CodePen

 

Just trying to have the grey bar jump out to FIXED position, go to width of 100% and have the other stuff scroll up under it.... 

If you only view in this window it may look "right" but with each scroll up and down the replacement sends it farther to the left and make your screen wide enough to see it... the grey bar never gets to "100 percent."

 

Link to comment
Share on other sites

THIS IS EXACTLY it. thanks so much! I will check it all out and see what I left off and what you changed!! 

Thanks JACK!!!

 

At first glance I am confused already why the start and end point are the same but maybe that's already making sense as I think on it. Like my actual "need" was more like a trip-wire. So when you trip over this wire in either direction - "do these other things..."

 

 

Link to comment
Share on other sites

I LOVE how elegantly simple the real solutions always are!! I am sorry to be such a pain in the aggressive "THIS IS WHAT I AM DOING!!! HELPPPP!" hahaha -- you guys are awesome to help so much!

 

So dumb question for the hobbyist: I am always confused by the CSS syntax of 

 

#first.active { 
	/* something */ 
}

VS

#first  .active {
 /* something else * / 
}

I always thought anything bookended like the first thing was just saying "Look for all the .active classes inside the element with the ID of "first."

But apparently when there is no space, it's saying, "Look for the element with the ID of "first" AND a class of "active," right?

 

And the second one above is saying, "Look INSIDE the element with the id of "first" and do something to all the elements inside that element that have the class "active" ... yes?

 

Because when I put a space in it, it breaks it, is basically what made me conclude the above. 

Link to comment
Share on other sites

Sounds like you get it. The space would be another element. If they are connected, it would be the same element.

 

<!-- #first.active would select the #first element -->

<div id="first" class="active"></div>

 

<!-- #first .active would select the second element -->

<div id="first">
  <div class="active"></div>
</div>

 

  • Like 1
Link to comment
Share on other sites

3 hours ago, Jim Nayzium said:

At first glance I am confused already why the start and end point are the same but maybe that's already making sense as I think on it. Like my actual "need" was more like a trip-wire. So when you trip over this wire in either direction - "do these other things..."

Yep, exactly. It wouldn't hurt anything to have the "end" further down the page...but it wouldn't help anything either. Your usage doesn't even care where it "ends" - all it taps into is the start anyway because you're using onEnter and onLeaveBack callbacks (both relate to the "start" only). So I kept it simple and made the end 1px lower than the start. 

 

Is everything making sense now?

Link to comment
Share on other sites

IT TOTALLY IS... and my confusion I think was wrapped up in not fully grasping how to do the END.

I kept making the footer the endTrigger and it would create a scenario where the body text woudln't scroll UNDER the PINNED div... but scroll all the pin-spacer white-space up to it then push it off with it. I kept messing with z-index and other stuff and coudn't make it make sense. 

 

But the end =+1 made perfect sense. For some reason, I had stuck in my brain that the PINNED deal would UNPIN as the endTrigger was reached also. That wasn't from the tutorials... that was just insanity stuck in my brain! 

  • Like 1
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...